<!DOCTYPE html><html class=split lang=en-US-x-hixie><script src=../link-fixup.js defer=""></script>
<!-- Mirrored from html.spec.whatwg.org/dev/dom.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 10 Sep 2025 08:36:24 GMT -->
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=utf-8" /><!-- /Added by HTTrack -->
<meta charset=utf-8><meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name=viewport><title>HTML Standard, Edition for Web Developers</title><meta content=#3c790a name=theme-color><meta content="light dark" name=color-scheme><link rel=stylesheet href=../../resources.whatwg.org/standard-shared-with-dev.css crossorigin=""><link rel=icon href=https://resources.whatwg.org/logo.svg crossorigin=""><link rel=stylesheet href=styles.css crossorigin=""><script>
   function toggleStatus(div) {
     div.parentNode.classList.toggle('wrapped');
   }
   function setLinkFragment(link) {
     link.hash = location.hash;
   }
  </script><body>
  <script async="" src=search.js></script>
  
  
  <header id=head class="head with-buttons">
   <a href=https://whatwg.org/ class=logo><img width=100 alt=WHATWG crossorigin="" class=darkmode-aware src=https://resources.whatwg.org/logo.svg height=100></a>
   
   <hgroup><h1><a rel=home href=index.html>HTML: The Living Standard</a></h1><p id=dev-edition-h2>Edition for Web Developers — Last Updated <span class=pubdate>10 September 2025</span></hgroup>
   

   <div id=search>
    <input placeholder="Search. Press '/'" autocomplete=off name=query id=query type=search>
    <ol id=results></ol>
   </div>
  </header>

  

  

  

  
  

  
  

  

  <nav><a href=structured-data.html>← 2.6 Safe passing of structured data</a> — <a href=index.html>Table of Contents</a> — <a href=semantics.html>4 The elements of HTML →</a></nav><ol class=toc><li><a href=dom.html#dom><span class=secno>3</span> Semantics, structure, and APIs of HTML documents</a><ol><li><a href=dom.html#documents><span class=secno>3.1</span> Documents</a><ol><li><a href=dom.html#the-document-object><span class=secno>3.1.1</span> The <code>Document</code> object</a><li><a href=dom.html#the-documentorshadowroot-interface><span class=secno>3.1.2</span> The <code>DocumentOrShadowRoot</code> interface</a><li><a href=dom.html#resource-metadata-management><span class=secno>3.1.3</span> Resource metadata management</a><li><a href=dom.html#reporting-document-loading-status><span class=secno>3.1.4</span> Reporting document loading status</a><li><a href=dom.html#render-blocking-mechanism><span class=secno>3.1.5</span> Render-blocking mechanism</a><li><a href=dom.html#dom-tree-accessors><span class=secno>3.1.6</span> DOM tree accessors</a></ol><li><a href=dom.html#elements><span class=secno>3.2</span> Elements</a><ol><li><a href=dom.html#semantics-2><span class=secno>3.2.1</span> Semantics</a><li><a href=dom.html#elements-in-the-dom><span class=secno>3.2.2</span> Elements in the DOM</a><li><a href=dom.html#element-definitions><span class=secno>3.2.3</span> Element definitions</a><ol><li><a href=dom.html#attributes><span class=secno>3.2.3.1</span> Attributes</a></ol><li><a href=dom.html#content-models><span class=secno>3.2.4</span> Content models</a><ol><li><a href=dom.html#the-nothing-content-model><span class=secno>3.2.4.1</span> The "nothing" content model</a><li><a href=dom.html#kinds-of-content><span class=secno>3.2.4.2</span> Kinds of content</a><ol><li><a href=dom.html#metadata-content><span class=secno>3.2.4.2.1</span> Metadata content</a><li><a href=dom.html#flow-content><span class=secno>3.2.4.2.2</span> Flow content</a><li><a href=dom.html#sectioning-content><span class=secno>3.2.4.2.3</span> Sectioning content</a><li><a href=dom.html#heading-content><span class=secno>3.2.4.2.4</span> Heading content</a><li><a href=dom.html#phrasing-content><span class=secno>3.2.4.2.5</span> Phrasing content</a><li><a href=dom.html#embedded-content-2><span class=secno>3.2.4.2.6</span> Embedded content</a><li><a href=dom.html#interactive-content><span class=secno>3.2.4.2.7</span> Interactive content</a><li><a href=dom.html#palpable-content><span class=secno>3.2.4.2.8</span> Palpable content</a><li><a href=dom.html#script-supporting-elements><span class=secno>3.2.4.2.9</span> Script-supporting elements</a><li><a href=dom.html#select-element-inner-content-elements><span class=secno>3.2.4.2.10</span> <code>select</code> element inner content elements</a><li><a href=dom.html#optgroup-element-inner-content-elements><span class=secno>3.2.4.2.11</span> <code>optgroup</code> element inner content elements</a><li><a href=dom.html#option-element-inner-content-elements><span class=secno>3.2.4.2.12</span> <code>option</code> element inner content elements</a></ol><li><a href=dom.html#transparent-content-models><span class=secno>3.2.4.3</span> Transparent content models</a><li><a href=dom.html#paragraphs><span class=secno>3.2.4.4</span> Paragraphs</a></ol><li><a href=dom.html#global-attributes><span class=secno>3.2.5</span> Global attributes</a><ol><li><a href=dom.html#the-title-attribute><span class=secno>3.2.5.1</span> The <code>title</code> attribute</a><li><a href=dom.html#the-lang-and-xml:lang-attributes><span class=secno>3.2.5.2</span> The <code>lang</code> and <code>xml:lang</code>
  attributes</a><li><a href=dom.html#the-translate-attribute><span class=secno>3.2.5.3</span> The <code>translate</code> attribute</a><li><a href=dom.html#the-dir-attribute><span class=secno>3.2.5.4</span> The <code>dir</code> attribute</a><li><a href=dom.html#the-style-attribute><span class=secno>3.2.5.5</span> The <code>style</code> attribute</a><li><a href=dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes><span class=secno>3.2.5.6</span> Embedding custom non-visible data with the <code>data-*</code> attributes</a></ol><li><a href=dom.html#the-innertext-idl-attribute><span class=secno>3.2.6</span> The <code>innerText</code> and <code>outerText</code> properties</a><li><a href=dom.html#requirements-relating-to-the-bidirectional-algorithm><span class=secno>3.2.7</span> Requirements relating to the bidirectional algorithm</a></ol></ol></ol><h2 id=dom><span class=secno>3</span> Semantics, structure, and APIs of HTML documents<a href=#dom class=self-link></a></h2>

  <h3 id=documents><span class=secno>3.1</span> Documents<a href=#documents class=self-link></a></h3>

  <p>Every XML and HTML document in an HTML UA is represented by a <code>Document</code> object.
  <a href=references.html#refsDOM>[DOM]</a></p>

  <p>The <code>Document</code> object's <dfn id="the-document's-address"><a href=https://dom.spec.whatwg.org/#concept-document-url>URL</a></dfn> is defined in
  <cite>DOM</cite>. It is initially set when the <code>Document</code> object is created, but can
  change during the lifetime of the <code>Document</code> object; for example, it changes when the
  user <a href=browsing-the-web.html#navigate id=documents:navigate>navigates</a> to a <a href=browsing-the-web.html#navigate-fragid id=documents:navigate-fragid>fragment</a>
  on the page and when the <code id=documents:dom-history-pushstate><a href=nav-history-apis.html#dom-history-pushstate>pushState()</a></code> method is called
  with a new <a id=documents:url href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a>. <a href=references.html#refsDOM>[DOM]</a></p>
  

  <p class=warning>Interactive user agents typically expose the <code>Document</code> object's
  <a href=https://dom.spec.whatwg.org/#concept-document-url id="documents:the-document's-address" data-x-internal="the-document's-address">URL</a> in their user interface. This is the primary
  mechanism by which a user can tell if a site is attempting to impersonate another.</p>

  <p>The <code>Document</code> object's <dfn id=concept-document-origin><a href=https://dom.spec.whatwg.org/#concept-document-origin>origin</a></dfn> is defined in
  <cite>DOM</cite>. It is initially set when the <code>Document</code> object is created, and can
  change during the lifetime of the <code>Document</code> only upon setting <code id=documents:dom-document-domain><a href=browsers.html#dom-document-domain>document.domain</a></code>. A <code>Document</code>'s <a href=https://dom.spec.whatwg.org/#concept-document-origin id=documents:concept-document-origin data-x-internal=concept-document-origin>origin</a> can differ from the <a href=https://url.spec.whatwg.org/#concept-url-origin id=documents:concept-url-origin data-x-internal=concept-url-origin>origin</a> of its <a href=https://dom.spec.whatwg.org/#concept-document-url id="documents:the-document's-address-2" data-x-internal="the-document's-address">URL</a>;
  for example when a <a id=documents:child-navigable href=document-sequences.html#child-navigable>child navigable</a> is <a href=document-sequences.html#create-a-new-child-navigable id=documents:create-a-new-child-navigable>created</a>, its <a href=document-sequences.html#nav-document id=documents:nav-document>active document</a>'s <a href=https://dom.spec.whatwg.org/#concept-document-origin id=documents:concept-document-origin-2 data-x-internal=concept-document-origin>origin</a> is inherited from its <a href=document-sequences.html#nav-parent id=documents:nav-parent>parent</a>'s <a href=document-sequences.html#nav-document id=documents:nav-document-2>active document</a>'s <a href=https://dom.spec.whatwg.org/#concept-document-origin id=documents:concept-document-origin-3 data-x-internal=concept-document-origin>origin</a>, even though its <a href=document-sequences.html#nav-document id=documents:nav-document-3>active document</a>'s <a href=https://dom.spec.whatwg.org/#concept-document-url id="documents:the-document's-address-3" data-x-internal="the-document's-address">URL</a> is
  <code id=documents:about:blank><a href=infrastructure.html#about:blank>about:blank</a></code>. <a href=references.html#refsDOM>[DOM]</a></p>

  <p>When a <code>Document</code> is created by a <span>script</span> using
  the <code id=documents:dom-domimplementation-createdocument><a data-x-internal=dom-domimplementation-createdocument href=https://dom.spec.whatwg.org/#dom-domimplementation-createdocument>createDocument()</a></code> or <code id=documents:dom-domimplementation-createhtmldocument><a data-x-internal=dom-domimplementation-createhtmldocument href=https://dom.spec.whatwg.org/#dom-domimplementation-createhtmldocument>createHTMLDocument()</a></code> methods, the
  <code>Document</code> is <span>ready for post-load tasks</span> immediately.</p>

  <p><dfn id="the-document's-referrer" data-export="">The document's referrer</dfn> is a string (representing a <a id=documents:url-2 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a>) that
  can be set when the <code>Document</code> is created. If it is not explicitly set, then its value
  is the empty string.</p>


  <h4 id=the-document-object><span class=secno>3.1.1</span> The <code>Document</code> object<a href=#the-document-object class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/Document title="The Document interface represents any web page loaded in the browser and serves as an entry point into the web page's content, which is the DOM tree.">Document</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>3+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>4+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>10.1+</span></span></div></div></div>

  <p><cite>DOM</cite> defines a <code id=the-document-object:dom-document><a data-x-internal=dom-document href=https://dom.spec.whatwg.org/#interface-document>Document</a></code> interface, which
  this specification extends significantly.</p>

  

  <p>Each <code>Document</code> has a <dfn data-dfn-for=Document id=concept-document-policy-container data-export="">policy container</dfn> (a <span>policy container</span>), initially a new policy
  container, which contains policies which apply to the <code>Document</code>.</p>

  <p id=concept-document-feature-policy>Each <code>Document</code> has a <dfn data-dfn-for=Document id=concept-document-permissions-policy data-export="">permissions policy</dfn>, which
  is a <a href=https://w3c.github.io/webappsec-feature-policy/#permissions-policy id=the-document-object:concept-permissions-policy data-x-internal=concept-permissions-policy>permissions policy</a>, which is initially
  empty.</p>

  <p>Each <code>Document</code> has a <dfn id=concept-document-module-map>module map</dfn>,
  which is a <span>module map</span>, initially empty.</p>

  <p>Each <code>Document</code> has an <dfn id=concept-document-coop>opener policy</dfn>,
  which is an <span>opener policy</span>, initially a new opener policy.</p>

  <p>Each <code>Document</code> has an <dfn id=is-initial-about:blank>is initial <code>about:blank</code></dfn>, which is a
  boolean, initially false.</p>

  <p>Each <code>Document</code> has a <dfn id=concept-document-navigation-id>during-loading
  navigation ID for WebDriver BiDi</dfn>, which is a <a id=the-document-object:navigation-id href=browsing-the-web.html#navigation-id>navigation ID</a> or null, initially
  null.</p>

  <p class=note>As the name indicates, this is used for interfacing with the <cite>WebDriver
  BiDi</cite> specification, which needs to be informed about certain occurrences during the early
  parts of the <code>Document</code>'s lifecycle, in a way that ties them to the original
  <a id=the-document-object:navigation-id-2 href=browsing-the-web.html#navigation-id>navigation ID</a> used when the navigation that created this <code>Document</code> was
  the <a id=the-document-object:ongoing-navigation href=browsing-the-web.html#ongoing-navigation>ongoing navigation</a>. This eventually gets set back to null, after <cite>WebDriver
  BiDi</cite> considers the loading process to be finished. <a href=references.html#refsBIDI>[BIDI]</a></p>

  <p>Each <code>Document</code> has an <dfn id=concept-document-about-base-url>about base
  URL</dfn>, which is a <a id=the-document-object:url href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> or null, initially null.</p>

  <p class=note>This is only populated for "<code>about:</code>"-schemed
  <code>Document</code>s.</p>

  <p>Each <code>Document</code> has a <dfn id=concept-document-bfcache-blocking-details>bfcache blocking details</dfn>, which is a
  <a id=the-document-object:set href=https://infra.spec.whatwg.org/#ordered-set data-x-internal=set>set</a> of <a href=nav-history-apis.html#nrr-details-struct id=the-document-object:nrr-details-struct>not restored reason details</a>,
  initially empty.</p>

  <p>Each <code>Document</code> has an <dfn id=open-dialogs-list>open dialogs list</dfn>, which is a <a id=the-document-object:list href=https://infra.spec.whatwg.org/#list data-x-internal=list>list</a> of
  <code id=the-document-object:the-dialog-element><a href=interactive-elements.html#the-dialog-element>dialog</a></code> elements, initially empty.</p>

  <h4 id=the-documentorshadowroot-interface><span class=secno>3.1.2</span> The <code>DocumentOrShadowRoot</code> interface<a href=#the-documentorshadowroot-interface class=self-link></a></h4>

  <p><cite>DOM</cite> defines the <code id=the-documentorshadowroot-interface:dom-documentorshadowroot><a data-x-internal=dom-documentorshadowroot href=https://dom.spec.whatwg.org/#documentorshadowroot>DocumentOrShadowRoot</a></code> mixin, which this specification
  extends.</p>

  

  <h4 id=resource-metadata-management><span class=secno>3.1.3</span> <dfn>Resource metadata management</dfn><a href=#resource-metadata-management class=self-link></a></h4>

  <dl class=domintro><dt><code><var>document</var>.<span id=dom-document-referrer>referrer</span></code><dd>
    <p>Returns the <a href=https://dom.spec.whatwg.org/#concept-document-url id="resource-metadata-management:the-document's-address" data-x-internal="the-document's-address">URL</a> of the <code>Document</code> from
    which the user navigated to this one, unless it was blocked or there was no such document, in
    which case it returns the empty string.</p>

    <p>The <code id=resource-metadata-management:link-type-noreferrer><a href=links.html#link-type-noreferrer>noreferrer</a></code> link type can be used to block the
    referrer.</p>
   </dl>

  

  <hr>

  <dl class=domintro><dt><code><var>document</var>.<span id=dom-document-cookie>cookie</span> [ = <var>value</var> ]</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie title="The Document property cookie lets you read and write cookies associated with the document. It serves as a getter and setter for the actual values of the cookies.">Document/cookie</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>3+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>4+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>10.1+</span></span></div></div></div><dd>
    <p>Returns the HTTP cookies that apply to the <code>Document</code>. If there are no cookies or
    cookies can't be applied to this resource, the empty string will be returned.</p>

    <p>Can be set, to add a new cookie to the element's set of HTTP cookies.</p>

    <p>If the contents are <a href=browsers.html#sandboxed-origin-browsing-context-flag id=resource-metadata-management:sandboxed-origin-browsing-context-flag>sandboxed into an
    opaque origin</a> (e.g., in an <code id=resource-metadata-management:the-iframe-element><a href=iframe-embed-object.html#the-iframe-element>iframe</a></code> with the <code id=resource-metadata-management:attr-iframe-sandbox><a href=iframe-embed-object.html#attr-iframe-sandbox>sandbox</a></code> attribute), a
    <a id=resource-metadata-management:securityerror href=https://webidl.spec.whatwg.org/#securityerror data-x-internal=securityerror>"<code>SecurityError</code>"</a> <code id=resource-metadata-management:domexception><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code> will be thrown on getting
    and setting.</p>
   </dl>

  

  <dl class=domintro><dt><code><var>document</var>.<span id=dom-document-lastmodified>lastModified</span></code><dd>
    <p>Returns the date of the last modification to the document, as reported by the server, in the
    form "<code>MM/DD/YYYY hh:mm:ss</code>", in the user's local time zone.</p>

    <p>If the last modification date is not known, the current time is returned instead.</p>
   </dl>

  


  <h4 id=reporting-document-loading-status><span class=secno>3.1.4</span> Reporting document loading status<a href=#reporting-document-loading-status class=self-link></a></h4>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event title="The DOMContentLoaded event fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.">Document/DOMContentLoaded_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>9+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>10.1+</span></span></div></div></div><dl class=domintro><dt><code><var>document</var>.<span id=dom-document-readystate>readyState</span></code><dd>
    <p>Returns "<code>loading</code>" while the <code>Document</code> is loading, "<code>interactive</code>" once it is finished parsing but still loading subresources, and
    "<code>complete</code>" once it has loaded.</p>

    <p>The <code id=reporting-document-loading-status:event-readystatechange><a href=indices.html#event-readystatechange>readystatechange</a></code> event fires on the
    <code>Document</code> object when this value changes.</p>

    <p><span id=stop-parsing></span>The <code id=reporting-document-loading-status:event-domcontentloaded><a href=indices.html#event-domcontentloaded>DOMContentLoaded</a></code> event fires after the transition to
    "<code>interactive</code>" but before the transition to "<code>complete</code>", at the point where all subresources apart from <code id=reporting-document-loading-status:attr-script-async><a href=scripting.html#attr-script-async>async</a></code> <code id=reporting-document-loading-status:the-script-element><a href=scripting.html#the-script-element>script</a></code> elements have loaded.</p>
   </dl>

  

  <h4 id=render-blocking-mechanism><span class=secno>3.1.5</span> <dfn>Render-blocking mechanism</dfn><a href=#render-blocking-mechanism class=self-link></a></h4>

  <p>Each <code>Document</code> has a <dfn id=render-blocking-element-set>render-blocking element set</dfn>, a <a id=render-blocking-mechanism:set href=https://infra.spec.whatwg.org/#ordered-set data-x-internal=set>set</a> of
  elements, initially the empty set.</p>

  <p>A <code>Document</code> <var>document</var> <dfn id=allows-adding-render-blocking-elements>allows adding render-blocking elements</dfn>
  if <var>document</var>'s <a href=https://dom.spec.whatwg.org/#concept-document-content-type id=render-blocking-mechanism:concept-document-content-type data-x-internal=concept-document-content-type>content type</a> is
  "<code>text/html</code>" and <a href=#the-body-element-2 id=render-blocking-mechanism:the-body-element-2>the body element</a> of <var>document</var> is null.</p>

  <p>A <code>Document</code> <var>document</var> is <dfn id=render-blocked>render-blocked</dfn> if both of the
  following are true:</p>

  <ul><li><p><var>document</var>'s <a href=#render-blocking-element-set id=render-blocking-mechanism:render-blocking-element-set>render-blocking element set</a> is non-empty, or
   <var>document</var> <a href=#allows-adding-render-blocking-elements id=render-blocking-mechanism:allows-adding-render-blocking-elements>allows adding render-blocking elements</a>.</p>

   <li><p>The <a id=render-blocking-mechanism:current-high-resolution-time href=https://w3c.github.io/hr-time/#dfn-current-high-resolution-time data-x-internal=current-high-resolution-time>current high resolution time</a> given <var>document</var>'s <span>relevant
   global object</span> has not exceeded an <a id=render-blocking-mechanism:implementation-defined href=https://infra.spec.whatwg.org/#implementation-defined data-x-internal=implementation-defined>implementation-defined</a> timeout value.</p>
  </ul>

  <p>An element <var>el</var> is <dfn id=render-blocking>render-blocking</dfn> if <var>el</var>'s
  <a id=render-blocking-mechanism:node-document href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a> <var>document</var> is <a href=#render-blocked id=render-blocking-mechanism:render-blocked>render-blocked</a>, and <var>el</var>
  is in <var>document</var>'s <a href=#render-blocking-element-set id=render-blocking-mechanism:render-blocking-element-set-2>render-blocking element set</a>.</p>

  <p>To <dfn id=block-rendering>block rendering</dfn> on an element <var>el</var>:</p>

  <ol><li><p>Let <var>document</var> be <var>el</var>'s <a id=render-blocking-mechanism:node-document-2 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>.</p>

   <li><p>If <var>document</var> <a href=#allows-adding-render-blocking-elements id=render-blocking-mechanism:allows-adding-render-blocking-elements-2>allows adding render-blocking elements</a>, then
   <a href=https://infra.spec.whatwg.org/#set-append id=render-blocking-mechanism:set-append data-x-internal=set-append>append</a> <var>el</var> to <var>document</var>'s
   <a href=#render-blocking-element-set id=render-blocking-mechanism:render-blocking-element-set-3>render-blocking element set</a>.</p>
  </ol>

  <p>To <dfn id=unblock-rendering>unblock rendering</dfn> on an element <var>el</var>:</p>

  <ol><li><p>Let <var>document</var> be <var>el</var>'s <a id=render-blocking-mechanism:node-document-3 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>.</p>

   <li><p><a href=https://infra.spec.whatwg.org/#list-remove id=render-blocking-mechanism:list-remove data-x-internal=list-remove>Remove</a> <var>el</var> from <var>document</var>'s
   <a href=#render-blocking-element-set id=render-blocking-mechanism:render-blocking-element-set-4>render-blocking element set</a>.</p>
  </ol>

  <p>Whenever a <a href=#render-blocking id=render-blocking-mechanism:render-blocking>render-blocking</a> element <var>el</var>
  <a id=render-blocking-mechanism:becomes-browsing-context-disconnected href=infrastructure.html#becomes-browsing-context-disconnected>becomes browsing-context disconnected</a>, or <var>el</var>'s
  <a id=render-blocking-mechanism:blocking-attribute href=urls-and-fetching.html#blocking-attribute>blocking attribute</a>'s value is changed so that <var>el</var> is no longer
  <a id=render-blocking-mechanism:potentially-render-blocking href=urls-and-fetching.html#potentially-render-blocking>potentially render-blocking</a>, then <a href=#unblock-rendering id=render-blocking-mechanism:unblock-rendering>unblock rendering</a> on
  <var>el</var>.</p>

  <h4 id=dom-tree-accessors><span class=secno>3.1.6</span> <dfn>DOM tree accessors</dfn><a href=#dom-tree-accessors class=self-link></a></h4>

  <p><dfn id=the-html-element-2>The <code>html</code> element</dfn> of a document is its <a id=dom-tree-accessors:document-element href=https://dom.spec.whatwg.org/#document-element data-x-internal=document-element>document element</a>,
  if it's an <code id=dom-tree-accessors:the-html-element><a href=semantics.html#the-html-element>html</a></code> element, and null otherwise.</p>

  <hr>

  <dl class=domintro><dt><code><var>document</var>.<span id=dom-document-head>head</span></code><dd><p>Returns <a href=#the-head-element-2 id=dom-tree-accessors:the-head-element-2>the <code>head</code> element</a>.</dl>

  <p><dfn id=the-head-element-2>The <code>head</code> element</dfn> of a document is the first <code id=dom-tree-accessors:the-head-element><a href=semantics.html#the-head-element>head</a></code> element
  that is a child of <a href=#the-html-element-2 id=dom-tree-accessors:the-html-element-2>the <code>html</code> element</a>, if there is one, or null
  otherwise.</p>

  

  <hr>

  <dl class=domintro><dt><code><var>document</var>.<span id=dom-document-title>title</span> [ = <var>value</var> ]</code><dd>
    <p>Returns the document's title, as given by <a href=#the-title-element-2 id=dom-tree-accessors:the-title-element-2>the <code>title</code> element</a> for
    HTML and as given by the <a id=dom-tree-accessors:svg-title href=https://svgwg.org/svg2-draft/struct.html#TitleElement data-x-internal=svg-title>SVG <code>title</code></a> element for SVG.</p>

    <p>Can be set, to update the document's title. If there is no appropriate element to update, the
    new value is ignored.</p>
   </dl>

  <p><dfn id=the-title-element-2>The <code>title</code> element</dfn> of a document is the first <code id=dom-tree-accessors:the-title-element><a href=semantics.html#the-title-element>title</a></code> element
  in the document (in <a id=dom-tree-accessors:tree-order href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree order</a>), if there is one, or null otherwise.</p>

  

  <hr>

  <dl class=domintro><dt><code><var>document</var>.<span id=dom-document-body>body</span> [ = <var>value</var> ]</code><dd>
    <p>Returns <a href=#the-body-element-2 id=dom-tree-accessors:the-body-element-2>the body element</a>.</p>

    <p>Can be set, to replace <a href=#the-body-element-2 id=dom-tree-accessors:the-body-element-2-2>the body element</a>.</p>

    <p>If the new value is not a <code id=dom-tree-accessors:the-body-element><a href=sections.html#the-body-element>body</a></code> or <code>frameset</code> element, this will throw
    a <a id=dom-tree-accessors:hierarchyrequesterror href=https://webidl.spec.whatwg.org/#hierarchyrequesterror data-x-internal=hierarchyrequesterror>"<code>HierarchyRequestError</code>"</a> <code id=dom-tree-accessors:domexception><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.</p>
   </dl>

  <p><dfn id=the-body-element-2 data-export="">The body element</dfn> of a document is the first of <a href=#the-html-element-2 id=dom-tree-accessors:the-html-element-2-2>the <code>html</code>
  element</a>'s children that is either a <code id=dom-tree-accessors:the-body-element-3><a href=sections.html#the-body-element>body</a></code> element or a <code>frameset</code>
  element, or null if there is no such element.</p>

  

  <hr>

  <dl class=domintro><dt><code><var>document</var>.<span id=dom-document-images>images</span></code><dd>
    <p>Returns an <code id=dom-tree-accessors:htmlcollection><a data-x-internal=htmlcollection href=https://dom.spec.whatwg.org/#interface-htmlcollection>HTMLCollection</a></code> of the <code id=dom-tree-accessors:the-img-element><a href=embedded-content.html#the-img-element>img</a></code> elements in the
    <code>Document</code>.</p>
   <dt><code><var>document</var>.<span id=dom-document-embeds>embeds</span></code><dt><code><var>document</var>.<span id=dom-document-plugins>plugins</span></code><dd>
    <p>Returns an <code id=dom-tree-accessors:htmlcollection-2><a data-x-internal=htmlcollection href=https://dom.spec.whatwg.org/#interface-htmlcollection>HTMLCollection</a></code> of the <code id=dom-tree-accessors:the-embed-element><a href=iframe-embed-object.html#the-embed-element>embed</a></code> elements in the
    <code>Document</code>.</p>
   <dt><code><var>document</var>.<span id=dom-document-links>links</span></code><dd>
    <p>Returns an <code id=dom-tree-accessors:htmlcollection-3><a data-x-internal=htmlcollection href=https://dom.spec.whatwg.org/#interface-htmlcollection>HTMLCollection</a></code> of the <code id=dom-tree-accessors:the-a-element><a href=text-level-semantics.html#the-a-element>a</a></code> and <code id=dom-tree-accessors:the-area-element><a href=image-maps.html#the-area-element>area</a></code> elements
    in the <code>Document</code> that have <code id=dom-tree-accessors:attr-hyperlink-href><a href=links.html#attr-hyperlink-href>href</a></code>
    attributes.</p>
   <dt><code><var>document</var>.<span id=dom-document-forms>forms</span></code><dd>
    <p>Returns an <code id=dom-tree-accessors:htmlcollection-4><a data-x-internal=htmlcollection href=https://dom.spec.whatwg.org/#interface-htmlcollection>HTMLCollection</a></code> of the <code id=dom-tree-accessors:the-form-element><a href=forms.html#the-form-element>form</a></code> elements in the
    <code>Document</code>.</p>
   <dt><code><var>document</var>.<span id=dom-document-scripts>scripts</span></code><dd>
    <p>Returns an <code id=dom-tree-accessors:htmlcollection-5><a data-x-internal=htmlcollection href=https://dom.spec.whatwg.org/#interface-htmlcollection>HTMLCollection</a></code> of the <code id=dom-tree-accessors:the-script-element><a href=scripting.html#the-script-element>script</a></code> elements in the
    <code>Document</code>.</p>
   </dl>

  

  <dl class=domintro><dt><code><var>collection</var> = <var>document</var>.<span id=dom-document-getelementsbyname>getElementsByName</span>(<var>name</var>)</code><dd><p>Returns a <code id=dom-tree-accessors:nodelist><a data-x-internal=nodelist href=https://dom.spec.whatwg.org/#interface-nodelist>NodeList</a></code> of elements in the <code>Document</code> that have a <code>name</code> attribute with the value <var>name</var>.</dl>

  

  <hr>

  <dl class=domintro><dt><code><var>document</var>.<span id=dom-document-currentscript>currentScript</span></code><dd>
    <p>Returns the <code id=dom-tree-accessors:the-script-element-2><a href=scripting.html#the-script-element>script</a></code> element, or the <a id=dom-tree-accessors:svg-script href=https://svgwg.org/svg2-draft/interact.html#ScriptElement data-x-internal=svg-script>SVG <code>script</code></a> element,
    that is currently executing, as long as the element represents a <span>classic script</span>. In
    the case of reentrant script execution, returns the one that most recently started executing
    amongst those that have not yet finished executing.</p>

    <p>Returns null if the <code>Document</code> is not currently executing a <code id=dom-tree-accessors:the-script-element-3><a href=scripting.html#the-script-element>script</a></code> or
    <a id=dom-tree-accessors:svg-script-2 href=https://svgwg.org/svg2-draft/interact.html#ScriptElement data-x-internal=svg-script>SVG <code>script</code></a> element (e.g., because the running script is an event
    handler, or a timeout), or if the currently executing <code id=dom-tree-accessors:the-script-element-4><a href=scripting.html#the-script-element>script</a></code> or <a id=dom-tree-accessors:svg-script-3 href=https://svgwg.org/svg2-draft/interact.html#ScriptElement data-x-internal=svg-script>SVG
    <code>script</code></a> element represents a <span>module script</span>.</p>
   </dl>

  

  <p class=note>This API has fallen out of favor in the implementer and standards community, as
  it globally exposes <code id=dom-tree-accessors:the-script-element-5><a href=scripting.html#the-script-element>script</a></code> or <a id=dom-tree-accessors:svg-script-4 href=https://svgwg.org/svg2-draft/interact.html#ScriptElement data-x-internal=svg-script>SVG <code>script</code></a> elements. As such,
  it is not available in newer contexts, such as when running <span>module
  scripts</span> or when running scripts in a <a id=dom-tree-accessors:shadow-tree href=https://dom.spec.whatwg.org/#concept-shadow-tree data-x-internal=shadow-tree>shadow tree</a>. We are looking into creating
  a new solution for identifying the running script in such contexts, which does not make it
  globally available: see <a href=https://github.com/whatwg/html/issues/1013>issue #1013</a>.</p>

  

  <hr>

  <p class=note>The <code>dir</code> attribute on the
  <code>Document</code> interface is defined along with the <code id=dom-tree-accessors:attr-dir><a href=#attr-dir>dir</a></code>
  content attribute.</p>



  <h3 id=elements><span class=secno>3.2</span> Elements<a href=#elements class=self-link></a></h3>

  <h4 id=semantics-2><span class=secno>3.2.1</span> Semantics<a href=#semantics-2 class=self-link></a></h4>

  <p>Elements, attributes, and attribute values in HTML are defined (by this specification) to have
  certain meanings (semantics). For example, the <code id=semantics-2:the-ol-element><a href=grouping-content.html#the-ol-element>ol</a></code> element represents an ordered list,
  and the <code id=semantics-2:attr-lang><a href=#attr-lang>lang</a></code> attribute represents the language of the content.</p>

  <p>These definitions allow HTML processors, such as web browsers or search engines, to present and
  use documents and applications in a wide variety of contexts that the author might not have
  considered.</p>

  <div class=example>

   <p>As a simple example, consider a web page written by an author who only considered desktop
   computer web browsers:</p>

   <pre><code class='html'><c- cp>&lt;!DOCTYPE HTML&gt;</c->
<c- p>&lt;</c-><c- f>html</c-> <c- e>lang</c-><c- o>=</c-><c- s>&quot;en&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>head</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>title</c-><c- p>&gt;</c->My Page<c- p>&lt;/</c-><c- f>title</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>head</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>body</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>h1</c-><c- p>&gt;</c->Welcome to my page<c- p>&lt;/</c-><c- f>h1</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->I like cars and lorries and have a big Jeep!<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>h2</c-><c- p>&gt;</c->Where I live<c- p>&lt;/</c-><c- f>h2</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->I live in a small hut on a mountain!<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>body</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>html</c-><c- p>&gt;</c-></code></pre>

   <p>Because HTML conveys <em>meaning</em>, rather than presentation, the same
   page can also be used by a small browser on a mobile phone, without any change to the page.
   Instead of headings being in large letters as on the desktop, for example, the browser on the
   mobile phone might use the same size text for the whole page, but with the headings in bold.</p>

   <p>But it goes further than just differences in screen size: the same page could equally be used
   by a blind user using a browser based around speech synthesis, which instead of displaying the
   page on a screen, reads the page to the user, e.g. using headphones. Instead of large text for
   the headings, the speech browser might use a different volume or a slower voice.</p>

   <p>That's not all, either. Since the browsers know which parts of the page are the headings, they
   can create a document outline that the user can use to quickly navigate around the document,
   using keys for "jump to next heading" or "jump to previous heading". Such features are especially
   common with speech browsers, where users would otherwise find quickly navigating a page quite
   difficult.</p>

   <p>Even beyond browsers, software can make use of this information. Search engines can use the
   headings to more effectively index a page, or to provide quick links to subsections of the page
   from their results. Tools can use the headings to create a table of contents (that is in fact how
   this very specification's table of contents is generated).</p>

   <p>This example has focused on headings, but the same principle applies to all of the semantics
   in HTML.</p>

  </div>

  <p>Authors must not use elements, attributes, or attribute values for purposes other than their
  appropriate intended semantic purpose, as doing so prevents software from correctly processing the
  page.</p>

  <div class=example>

   <p>For example, the following snippet, intended to represent the heading of a
   corporate site, is non-conforming because the second line is not intended to
   be a heading of a subsection, but merely a subheading or subtitle (a
   subordinate heading for the same section).</p>

   <pre class=bad><code class='html'><c- p>&lt;</c-><c- f>body</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>h1</c-><c- p>&gt;</c->ACME Corporation<c- p>&lt;/</c-><c- f>h1</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>h2</c-><c- p>&gt;</c->The leaders in arbitrary fast delivery since 1920<c- p>&lt;/</c-><c- f>h2</c-><c- p>&gt;</c->
 ...</code></pre>

   <p>The <code id=semantics-2:the-hgroup-element><a href=sections.html#the-hgroup-element>hgroup</a></code> element can be used for these kinds of situations:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>body</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>hgroup</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>h1</c-><c- p>&gt;</c->ACME Corporation<c- p>&lt;/</c-><c- f>h1</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->The leaders in arbitrary fast delivery since 1920<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>hgroup</c-><c- p>&gt;</c->
 ...</code></pre>

  </div>

  <div class=example>

   <p>The document in this next example is similarly non-conforming, despite
   being syntactically correct, because the data placed in the cells is clearly
   not tabular data, and the <code id=semantics-2:the-cite-element><a href=text-level-semantics.html#the-cite-element>cite</a></code> element mis-used:</p>

   <pre class=bad lang=en-GB><code class='html'><c- cp>&lt;!DOCTYPE HTML&gt;</c->
<c- p>&lt;</c-><c- f>html</c-> <c- e>lang</c-><c- o>=</c-><c- s>&quot;en-GB&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>head</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>title</c-><c- p>&gt;</c-> Demonstration <c- p>&lt;/</c-><c- f>title</c-><c- p>&gt;</c-> <c- p>&lt;/</c-><c- f>head</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>body</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>table</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> My favourite animal is the cat. <c- p>&lt;/</c-><c- f>td</c-><c- p>&gt;</c-> <c- p>&lt;/</c-><c- f>tr</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c->
    <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->
     —<c- p>&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;https://example.org/~ernest/&quot;</c-><c- p>&gt;&lt;</c-><c- f>cite</c-><c- p>&gt;</c->Ernest<c- p>&lt;/</c-><c- f>cite</c-><c- p>&gt;&lt;/</c-><c- f>a</c-><c- p>&gt;</c->,
     in an essay from 1992
    <c- p>&lt;/</c-><c- f>td</c-><c- p>&gt;</c->
   <c- p>&lt;/</c-><c- f>tr</c-><c- p>&gt;</c->
  <c- p>&lt;/</c-><c- f>table</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>body</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>html</c-><c- p>&gt;</c-></code></pre>

   <p>This would make software that relies on these semantics fail: for example,
   a speech browser that allowed a blind user to navigate tables in the document
   would report the quote above as a table, confusing the user; similarly, a
   tool that extracted titles of works from pages would extract "Ernest" as the
   title of a work, even though it's actually a person's name, not a title.</p>

   <p>A corrected version of this document might be:</p>

   <pre lang=en-GB><code class='html'><c- cp>&lt;!DOCTYPE HTML&gt;</c->
<c- p>&lt;</c-><c- f>html</c-> <c- e>lang</c-><c- o>=</c-><c- s>&quot;en-GB&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>head</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>title</c-><c- p>&gt;</c-> Demonstration <c- p>&lt;/</c-><c- f>title</c-><c- p>&gt;</c-> <c- p>&lt;/</c-><c- f>head</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>body</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>blockquote</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> My favourite animal is the cat. <c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;/</c-><c- f>blockquote</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->
   —<c- p>&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;https://example.org/~ernest/&quot;</c-><c- p>&gt;</c->Ernest<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c->,
   in an essay from 1992
  <c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>body</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>html</c-><c- p>&gt;</c-></code></pre>

  </div>

  <p>Authors must not use elements, attributes, or attribute values that are not permitted by this
  specification or <a id=semantics-2:other-applicable-specifications href=infrastructure.html#other-applicable-specifications>other applicable specifications</a>, as doing so makes it significantly
  harder for the language to be extended in the future.</p>

  <div class=example>

   <p>In the next example, there is a non-conforming attribute value ("carpet") and a non-conforming
   attribute ("texture"), which is not permitted by this specification:</p>

   <pre class=bad><code class='html'><c- p>&lt;</c-><c- f>label</c-><c- p>&gt;</c->Carpet: <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;carpet&quot;</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;c&quot;</c-> <c- e>texture</c-><c- o>=</c-><c- s>&quot;deep pile&quot;</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;</c-></code></pre>

   <p>Here would be an alternative and correct way to mark this up:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>label</c-><c- p>&gt;</c->Carpet: <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;text&quot;</c-> <c- e>class</c-><c- o>=</c-><c- s>&quot;carpet&quot;</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;c&quot;</c-> <c- e>data-texture</c-><c- o>=</c-><c- s>&quot;deep pile&quot;</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;</c-></code></pre>

  </div>

  <p id=no-browsing-context>DOM nodes whose <a id=semantics-2:node-document href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>'s <a href=document-sequences.html#concept-document-bc id=semantics-2:concept-document-bc>browsing context</a> is null are exempt from all document
  conformance requirements other than the <a href=syntax.html#writing>HTML syntax</a> requirements and <a href=#writing-xhtml-documents>XML syntax</a> requirements.</p>

  <div class=example>
   <p>In particular, the <code id=semantics-2:the-template-element><a href=scripting.html#the-template-element>template</a></code> element's <span>template contents</span>'s <a id=semantics-2:node-document-2 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node
   document</a>'s <a href=document-sequences.html#concept-document-bc id=semantics-2:concept-document-bc-2>browsing context</a> is null. For
   example, the <a href=#concept-element-content-model id=semantics-2:concept-element-content-model>content model</a> requirements and
   attribute value microsyntax requirements do not apply to a <code id=semantics-2:the-template-element-2><a href=scripting.html#the-template-element>template</a></code> element's
   <span>template contents</span>. In this example an <code id=semantics-2:the-img-element><a href=embedded-content.html#the-img-element>img</a></code> element has attribute values
   that are placeholders that would be invalid outside a <code id=semantics-2:the-template-element-3><a href=scripting.html#the-template-element>template</a></code> element.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>template</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>article</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>img</c-> <mark><c- e>src</c-><c- o>=</c-><c- s>&quot;{{src}}&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;{{alt}}&quot;</c-></mark><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>h1</c-><c- p>&gt;&lt;/</c-><c- f>h1</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>article</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>template</c-><c- p>&gt;</c-></code></pre>

   <p>However, if the above markup were to omit the <code>&lt;/h1></code> end tag, that
   would be a violation of the <a href=syntax.html#writing>HTML syntax</a>, and would thus be flagged as an
   error by conformance checkers.</p>
  </div>

  <p>Through scripting and using other mechanisms, the values of attributes, text, and indeed the
  entire structure of the document may change dynamically while a user agent is processing it. The
  semantics of a document at an instant in time are those represented by the state of the document
  at that instant in time, and the semantics of a document can therefore change over time. User
  agents  update their presentation of the document as this
  occurs.</p>

  <p class=example>HTML has a <code id=semantics-2:the-progress-element><a href=form-elements.html#the-progress-element>progress</a></code> element that describes a progress bar. If its
  "value" attribute is dynamically updated by a script, the UA would update the rendering to show
  the progress changing.</p>



  <h4 id=elements-in-the-dom><span class=secno>3.2.2</span> Elements in the DOM<a href=#elements-in-the-dom class=self-link></a></h4>

  <p>The nodes representing <a id=elements-in-the-dom:html-elements href=infrastructure.html#html-elements>HTML elements</a> in the DOM 
  implement, and expose to scripts, the interfaces listed for them in the relevant sections of this
  specification. This includes <a id=elements-in-the-dom:html-elements-2 href=infrastructure.html#html-elements>HTML elements</a> in <a id=elements-in-the-dom:xml-documents href=https://dom.spec.whatwg.org/#xml-document data-x-internal=xml-documents>XML documents</a>, even when
  those documents are in another context (e.g. inside an XSLT transform).</p>

  <p>Elements in the DOM <dfn id=represents>represent</dfn> things; that is, they have
  intrinsic <em>meaning</em>, also known as semantics.</p>

  <p class=example>For example, an <code id=elements-in-the-dom:the-ol-element><a href=grouping-content.html#the-ol-element>ol</a></code> element represents an ordered list.</p>

  <p>Elements can be <dfn id=referenced>referenced</dfn> (referred to) in some way, either
  explicitly or implicitly. One way that an element in the DOM can be explicitly referenced is by
  giving an <code id=elements-in-the-dom:the-id-attribute><a href=#the-id-attribute>id</a></code> attribute to the element, and then creating a
  <a id=elements-in-the-dom:hyperlink href=links.html#hyperlink>hyperlink</a> with that <code id=elements-in-the-dom:the-id-attribute-2><a href=#the-id-attribute>id</a></code> attribute's value as the <a href=browsing-the-web.html#navigate-fragid id=elements-in-the-dom:navigate-fragid>fragment</a> for the <a id=elements-in-the-dom:hyperlink-2 href=links.html#hyperlink>hyperlink</a>'s <code id=elements-in-the-dom:attr-hyperlink-href><a href=links.html#attr-hyperlink-href>href</a></code> attribute value. Hyperlinks are not necessary for a
  reference, however; any manner of referring to the element in question will suffice.</p>

  <div class=example>
   <p>Consider the following <code id=elements-in-the-dom:the-figure-element><a href=grouping-content.html#the-figure-element>figure</a></code> element, which is given an <code id=elements-in-the-dom:the-id-attribute-3><a href=#the-id-attribute>id</a></code> attribute:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>figure</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;module-script-graph&quot;</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;module-script-graph.svg&quot;</c->
       <c- e>alt</c-><c- o>=</c-><c- s>&quot;Module A depends on module B, which depends</c->
<c- s>            on modules C and D.&quot;</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>figcaption</c-><c- p>&gt;</c->Figure 27: a simple module graph<c- p>&lt;/</c-><c- f>figcaption</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>figure</c-><c- p>&gt;</c-></code></pre>

   <p>A <a id=elements-in-the-dom:hyperlink-3 href=links.html#hyperlink>hyperlink</a>-based <a href=#referenced id=elements-in-the-dom:referenced>reference</a> could be created
   using the <code id=elements-in-the-dom:the-a-element><a href=text-level-semantics.html#the-a-element>a</a></code> element, like so:</p>

   <pre><code class='html'>As we can see in <c- p>&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;#module-script-graph&quot;</c-><c- p>&gt;</c->figure 27<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c->, ...</code></pre>

   <p>However, there are many other ways of <a href=#referenced id=elements-in-the-dom:referenced-2>referencing</a> the
   <code id=elements-in-the-dom:the-figure-element-2><a href=grouping-content.html#the-figure-element>figure</a></code> element, such as:</p>

   <ul><li><p>"As depicted in the figure of modules A, B, C, and D..."<li><p>"In Figure 27..." (without a hyperlink)<li><p>"From the contents of the 'simple module graph' figure..."<li><p>"In the figure below..." (but <a href=grouping-content.html#figure-note-about-references>this is
    discouraged</a>)</ul>
  </div>

  <p>The basic interface, from which all the <a id=elements-in-the-dom:html-elements-3 href=infrastructure.html#html-elements>HTML elements</a>' interfaces inherit,  is
  the <code>HTMLElement</code> interface.</p>

  

  <p>The <code>HTMLElement</code> interface holds methods and attributes related to a number of
  disparate features, and the members of this interface are therefore described in various different
  sections of this specification.</p>

  

  <div class=example>
   <p>An example of an element that is neither an HTML nor SVG element is one created as
   follows:</p>

   <pre><code class='html'>const el = document.createElementNS(&quot;some namespace&quot;, &quot;example&quot;);
console.assert(el.constructor === Element);</code></pre>
  </div>

  



  <h4 id=element-definitions><span class=secno>3.2.3</span> Element definitions<a href=#element-definitions class=self-link></a></h4>

  <p>Each element in this specification has a definition that includes the following
  information:</p>

  <dl><dt><dfn id=concept-element-categories>Categories</dfn><dd><p>A list of <a href=#content-categories id=element-definitions:content-categories>categories</a> to which the element belongs.
   These are used when defining the <a href=#content-models id=element-definitions:content-models>content models</a> for each element.<dt><dfn id=concept-element-contexts>Contexts in which this element can be used</dfn><dd>
    <p>A <em>non-normative</em> description of where the element can be used. This information is
    redundant with the content models of elements that allow this one as a child, and is provided
    only as a convenience.</p>

    <div class=note>
     <p>For simplicity, only the most specific expectations are listed.</p>

     <p>For example, all <a href=#phrasing-content-2 id=element-definitions:phrasing-content-2>phrasing content</a> is <a href=#flow-content-2 id=element-definitions:flow-content-2>flow content</a>. Thus, elements
     that are <a href=#phrasing-content-2 id=element-definitions:phrasing-content-2-2>phrasing content</a> will only be listed as "where <a href=#phrasing-content-2 id=element-definitions:phrasing-content-2-3>phrasing
     content</a> is expected", since this is the more-specific expectation. Anywhere that expects
     <a href=#flow-content-2 id=element-definitions:flow-content-2-2>flow content</a> also expects <a href=#phrasing-content-2 id=element-definitions:phrasing-content-2-4>phrasing content</a>, and thus also meets this
     expectation.</p>
    </div>
   <dt><dfn id=concept-element-content-model>Content model</dfn><dd><p>A normative description of what content must be included as children and descendants of
   the element.<dt><dfn id=concept-element-tag-omission>Tag omission in text/html</dfn><dd><p>A <em>non-normative</em> description of whether, in the <code>text/html</code> syntax, the
   <a href=syntax.html#syntax-start-tag id=element-definitions:syntax-start-tag>start</a> and <a href=syntax.html#syntax-end-tag id=element-definitions:syntax-end-tag>end</a> tags can
   be omitted. This information is redundant with the normative requirements given in the <a href=syntax.html#syntax-tag-omission id=element-definitions:syntax-tag-omission>optional tags</a> section, and is provided in the element
   definitions only as a convenience.<dt><dfn id=concept-element-attributes>Content attributes</dfn><dd><p>A normative list of attributes that may be specified on the element (except where
   otherwise disallowed), along with non-normative descriptions of those attributes. (The content to
   the left of the dash is normative, the content to the right of the dash is not.)<dt><dfn id=concept-element-accessibility-considerations>Accessibility considerations</dfn><dd>
    <p>For authors: Conformance requirements for use of <cite>ARIA</cite> <code id=element-definitions:attr-aria-role><a href=infrastructure.html#attr-aria-role>role</a></code> and <code id=element-definitions:attr-aria-*><a href=infrastructure.html#attr-aria-*>aria-*</a></code> attributes are
    defined in <cite>ARIA in HTML</cite>. <a href=references.html#refsARIA>[ARIA]</a> <a href=references.html#refsARIAHTML>[ARIAHTML]</a></p>

    <p>For implementers: User agent requirements for implementing accessibility API semantics are
    defined in <cite>HTML Accessibility API Mappings</cite>. <a href=references.html#refsHTMLAAM>[HTMLAAM]</a></p>
   <dt><dfn id=concept-element-dom>DOM interface</dfn><dd><p>A normative definition of a DOM interface that such elements must implement.</dl>

  <p>This is then followed by a description of what the element <a href=#represents id=element-definitions:represents>represents</a>, along with
  any additional normative conformance criteria that may apply to authors. Examples are sometimes also included.</p>


  <h5 id=attributes><span class=secno>3.2.3.1</span> Attributes<a href=#attributes class=self-link></a></h5>

  <p id=attribute-text>An attribute value is a string. Except where otherwise specified,
  attribute values on <a id=attributes:html-elements href=infrastructure.html#html-elements>HTML elements</a> may be any string value, including the empty
  string, and there is no restriction on what text can be specified in such attribute values.</p>



  <h4 id=content-models><span class=secno>3.2.4</span> <dfn>Content models</dfn><a href=#content-models class=self-link></a></h4>

  <p>Each element defined in this specification has a content model: a description of the element's
  expected <a href=#concept-html-contents id=content-models:concept-html-contents>contents</a>. An <a href=infrastructure.html#html-elements id=content-models:html-elements>HTML
  element</a> must have contents that match the requirements described in the element's content
  model. The <dfn id=concept-html-contents>contents</dfn> of an element are its children in the
  DOM.</p>

  <p><a id=content-models:space-characters href=https://infra.spec.whatwg.org/#ascii-whitespace data-x-internal=space-characters>ASCII whitespace</a> is always allowed between elements. User agents represent these
  characters between elements in the source markup as <code id=content-models:text><a data-x-internal=text href=https://dom.spec.whatwg.org/#interface-text>Text</a></code> nodes in the DOM. Empty <code id=content-models:text-2><a data-x-internal=text href=https://dom.spec.whatwg.org/#interface-text>Text</a></code> nodes and
  <code id=content-models:text-3><a data-x-internal=text href=https://dom.spec.whatwg.org/#interface-text>Text</a></code> nodes consisting of just sequences of those characters are considered
  <dfn id=inter-element-whitespace>inter-element whitespace</dfn>.</p>

  <p><a href=#inter-element-whitespace id=content-models:inter-element-whitespace>Inter-element whitespace</a>, comment nodes, and processing instruction nodes must be
  ignored when establishing whether an element's contents match the element's content model or not,
  and must be ignored when following algorithms that define document and element semantics.</p>

  <p class=note>Thus, an element <var>A</var> is said to be <i>preceded or followed</i>
  by a second element <var>B</var> if <var>A</var> and <var>B</var> have
  the same parent node and there are no other element nodes or <code id=content-models:text-4><a data-x-internal=text href=https://dom.spec.whatwg.org/#interface-text>Text</a></code> nodes (other than
  <a href=#inter-element-whitespace id=content-models:inter-element-whitespace-2>inter-element whitespace</a>) between them. Similarly, a node is the <i>only child</i> of
  an element if that element contains no other nodes other than <a href=#inter-element-whitespace id=content-models:inter-element-whitespace-3>inter-element
  whitespace</a>, comment nodes, and processing instruction nodes.</p>

  <p>Authors must not use <a id=content-models:html-elements-2 href=infrastructure.html#html-elements>HTML elements</a> anywhere except where they are explicitly
  allowed, as defined for each element, or as explicitly required by other specifications. For XML
  compound documents, these contexts could be inside elements from other namespaces, if those
  elements are defined as providing the relevant contexts.</p>

  <p class=example><cite>The Atom Syndication Format</cite> defines a <code>content</code> element. When its <code>type</code> attribute has the value
  <code>xhtml</code>, <cite>The Atom Syndication Format</cite> requires that it contain a
  single HTML <code id=content-models:the-div-element><a href=grouping-content.html#the-div-element>div</a></code> element. Thus, a <code id=content-models:the-div-element-2><a href=grouping-content.html#the-div-element>div</a></code> element is allowed in that context,
  even though this is not explicitly normatively stated by this specification. <a href=references.html#refsATOM>[ATOM]</a></p>

  <p>In addition, <a id=content-models:html-elements-3 href=infrastructure.html#html-elements>HTML elements</a> may be orphan nodes (i.e. without a parent node).</p>

  <div class=example>

   <p>For example, creating a <code id=content-models:the-td-element><a href=tables.html#the-td-element>td</a></code> element and storing it in a global variable in a
   script is conforming, even though <code id=content-models:the-td-element-2><a href=tables.html#the-td-element>td</a></code> elements are otherwise only supposed to be used
   inside <code id=content-models:the-tr-element><a href=tables.html#the-tr-element>tr</a></code> elements.</p>

   <pre><code class='js'><c- a>var</c-> data <c- o>=</c-> <c- p>{</c->
  name<c- o>:</c-> <c- u>&quot;Banana&quot;</c-><c- p>,</c->
  cell<c- o>:</c-> document<c- p>.</c->createElement<c- p>(</c-><c- t>&apos;td&apos;</c-><c- p>),</c->
<c- p>};</c-></code></pre>

  </div>


  <h5 id=the-nothing-content-model><span class=secno>3.2.4.1</span> The "nothing" content model<a href=#the-nothing-content-model class=self-link></a></h5>

  <p>When an element's content model is <dfn id=concept-content-nothing>nothing</dfn>, the
  element must contain no <code id=the-nothing-content-model:text><a data-x-internal=text href=https://dom.spec.whatwg.org/#interface-text>Text</a></code> nodes (other than <a href=#inter-element-whitespace id=the-nothing-content-model:inter-element-whitespace>inter-element whitespace</a>)
  and no element nodes.</p>

  <p class=note>Most HTML elements whose content model is "nothing" are also, for convenience,
  <a id=the-nothing-content-model:void-elements href=syntax.html#void-elements>void elements</a> (elements that have no <a href=syntax.html#syntax-end-tag id=the-nothing-content-model:syntax-end-tag>end tag</a> in
  the <a href=syntax.html#syntax>HTML syntax</a>). However, these are entirely separate concepts.</p>


  <h5 id=kinds-of-content><span class=secno>3.2.4.2</span> Kinds of content<a href=#kinds-of-content class=self-link></a></h5>

  <p>Each element in HTML falls into zero or more <dfn id=content-categories>categories</dfn>
  that group elements with similar characteristics together. The following broad categories are used
  in this specification:</p>

  <ul class=brief><li><a href=#metadata-content-2 id=kinds-of-content:metadata-content-2>Metadata content</a><li><a href=#flow-content-2 id=kinds-of-content:flow-content-2>Flow content</a><li><a href=#sectioning-content-2 id=kinds-of-content:sectioning-content-2>Sectioning content</a><li><a href=#heading-content-2 id=kinds-of-content:heading-content-2>Heading content</a><li><a href=#phrasing-content-2 id=kinds-of-content:phrasing-content-2>Phrasing content</a><li><a href=#embedded-content-category id=kinds-of-content:embedded-content-category>Embedded content</a><li><a href=#interactive-content-2 id=kinds-of-content:interactive-content-2>Interactive content</a></ul>

  <p class=note>Some elements also fall into other categories, which are defined in other parts of
  this specification.</p>

  <p>These categories are related as follows:</p>

  <p><iframe src=../images/content-venn.svg width=1000 height=288></iframe></p>

  <p>Sectioning content, heading content, phrasing content, embedded content, and interactive
  content are all types of flow content. Metadata is sometimes flow content. Metadata and
  interactive content are sometimes phrasing content. Embedded content is also a type of phrasing
  content, and sometimes is interactive content.</p>

  <p>Other categories are also used for specific purposes, e.g. form controls are specified using a
  number of categories to define common requirements. Some elements have unique requirements and do
  not fit into any particular category.</p>


  <h6 id=metadata-content><span class=secno>3.2.4.2.1</span> Metadata content<a href=#metadata-content class=self-link></a></h6>

  <p><dfn id=metadata-content-2 data-export="">Metadata content</dfn> is content that sets up the presentation or behavior of the
  rest of the content, or that sets up the relationship of the document with other documents, or
  that conveys other "out of band" information.</p>

  
  <ul class="brief category-list"><li><code id=metadata-content:the-base-element><a href=semantics.html#the-base-element>base</a></code><li><code id=metadata-content:the-link-element><a href=semantics.html#the-link-element>link</a></code><li><code id=metadata-content:the-meta-element><a href=semantics.html#the-meta-element>meta</a></code><li><code id=metadata-content:the-noscript-element><a href=scripting.html#the-noscript-element>noscript</a></code><li><code id=metadata-content:the-script-element><a href=scripting.html#the-script-element>script</a></code><li><code id=metadata-content:the-style-element><a href=semantics.html#the-style-element>style</a></code><li><code id=metadata-content:the-template-element><a href=scripting.html#the-template-element>template</a></code><li><code id=metadata-content:the-title-element><a href=semantics.html#the-title-element>title</a></code></ul>

  <p>Elements from other namespaces whose semantics are primarily metadata-related (e.g. RDF) are
  also <a href=#metadata-content-2 id=metadata-content:metadata-content-2>metadata content</a>.</p>

  <div class=example>

   <p>Thus, in the XML serialization, one can use RDF, like this:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>html</c-> <c- e>xmlns</c-><c- o>=</c-><c- s>&quot;http://www.w3.org/1999/xhtml&quot;</c->
      <c- e>xmlns:r</c-><c- o>=</c-><c- s>&quot;http://www.w3.org/1999/02/22-rdf-syntax-ns#&quot;</c-> <c- e>xml:lang</c-><c- o>=</c-><c- s>&quot;en&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>head</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>title</c-><c- p>&gt;</c->Hedral&apos;s Home Page<c- p>&lt;/</c-><c- f>title</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>r:RDF</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>Person</c-> <c- e>xmlns</c-><c- o>=</c-><c- s>&quot;http://www.w3.org/2000/10/swap/pim/contact#&quot;</c->
           <c- e>r:about</c-><c- o>=</c-><c- s>&quot;https://hedral.example.com/#&quot;</c-><c- p>&gt;</c->
    <c- p>&lt;</c-><c- f>fullName</c-><c- p>&gt;</c->Cat Hedral<c- p>&lt;/</c-><c- f>fullName</c-><c- p>&gt;</c->
    <c- p>&lt;</c-><c- f>mailbox</c-> <c- e>r:resource</c-><c- o>=</c-><c- s>&quot;mailto:hedral@damowmow.com&quot;</c-><c- p>/&gt;</c->
    <c- p>&lt;</c-><c- f>personalTitle</c-><c- p>&gt;</c->Sir<c- p>&lt;/</c-><c- f>personalTitle</c-><c- p>&gt;</c->
   <c- p>&lt;/</c-><c- f>Person</c-><c- p>&gt;</c->
  <c- p>&lt;/</c-><c- f>r:RDF</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>head</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>body</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>h1</c-><c- p>&gt;</c->My home page<c- p>&lt;/</c-><c- f>h1</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->I like playing with string, I guess. Sister says squirrels are fun
  too so sometimes I follow her to play with them.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>body</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>html</c-><c- p>&gt;</c-></code></pre>

   <p>This isn't possible in the HTML serialization, however.</p>

  </div>


  <h6 id=flow-content><span class=secno>3.2.4.2.2</span> Flow content<a href=#flow-content class=self-link></a></h6>

  <p>Most elements that are used in the body of documents and applications are categorized as
  <dfn id=flow-content-2 data-export="">flow content</dfn>.</p>

  
  <ul class="brief category-list"><li><code id=flow-content:the-a-element><a href=text-level-semantics.html#the-a-element>a</a></code><li><code id=flow-content:the-abbr-element><a href=text-level-semantics.html#the-abbr-element>abbr</a></code><li><code id=flow-content:the-address-element><a href=sections.html#the-address-element>address</a></code><li><code id=flow-content:the-area-element><a href=image-maps.html#the-area-element>area</a></code> (if it is a descendant of a <code id=flow-content:the-map-element><a href=image-maps.html#the-map-element>map</a></code> element)<li><code id=flow-content:the-article-element><a href=sections.html#the-article-element>article</a></code><li><code id=flow-content:the-aside-element><a href=sections.html#the-aside-element>aside</a></code><li><code id=flow-content:the-audio-element><a href=media.html#the-audio-element>audio</a></code><li><code id=flow-content:the-b-element><a href=text-level-semantics.html#the-b-element>b</a></code><li><code id=flow-content:the-bdi-element><a href=text-level-semantics.html#the-bdi-element>bdi</a></code><li><code id=flow-content:the-bdo-element><a href=text-level-semantics.html#the-bdo-element>bdo</a></code><li><code id=flow-content:the-blockquote-element><a href=grouping-content.html#the-blockquote-element>blockquote</a></code><li><code id=flow-content:the-br-element><a href=text-level-semantics.html#the-br-element>br</a></code><li><code id=flow-content:the-button-element><a href=form-elements.html#the-button-element>button</a></code><li><code id=flow-content:the-canvas-element><a href=canvas.html#the-canvas-element>canvas</a></code><li><code id=flow-content:the-cite-element><a href=text-level-semantics.html#the-cite-element>cite</a></code><li><code id=flow-content:the-code-element><a href=text-level-semantics.html#the-code-element>code</a></code><li><code id=flow-content:the-data-element><a href=text-level-semantics.html#the-data-element>data</a></code><li><code id=flow-content:the-datalist-element><a href=form-elements.html#the-datalist-element>datalist</a></code><li><code id=flow-content:the-del-element><a href=edits.html#the-del-element>del</a></code><li><code id=flow-content:the-details-element><a href=interactive-elements.html#the-details-element>details</a></code><li><code id=flow-content:the-dfn-element><a href=text-level-semantics.html#the-dfn-element>dfn</a></code><li><code id=flow-content:the-dialog-element><a href=interactive-elements.html#the-dialog-element>dialog</a></code><li><code id=flow-content:the-div-element><a href=grouping-content.html#the-div-element>div</a></code><li><code id=flow-content:the-dl-element><a href=grouping-content.html#the-dl-element>dl</a></code><li><code id=flow-content:the-em-element><a href=text-level-semantics.html#the-em-element>em</a></code><li><code id=flow-content:the-embed-element><a href=iframe-embed-object.html#the-embed-element>embed</a></code><li><code id=flow-content:the-fieldset-element><a href=form-elements.html#the-fieldset-element>fieldset</a></code><li><code id=flow-content:the-figure-element><a href=grouping-content.html#the-figure-element>figure</a></code><li><code id=flow-content:the-footer-element><a href=sections.html#the-footer-element>footer</a></code><li><code id=flow-content:the-form-element><a href=forms.html#the-form-element>form</a></code><li><code id=flow-content:the-h1,-h2,-h3,-h4,-h5,-and-h6-elements><a href=sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code><li><code id=flow-content:the-h1,-h2,-h3,-h4,-h5,-and-h6-elements-2><a href=sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h2</a></code><li><code id=flow-content:the-h1,-h2,-h3,-h4,-h5,-and-h6-elements-3><a href=sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h3</a></code><li><code id=flow-content:the-h1,-h2,-h3,-h4,-h5,-and-h6-elements-4><a href=sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h4</a></code><li><code id=flow-content:the-h1,-h2,-h3,-h4,-h5,-and-h6-elements-5><a href=sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h5</a></code><li><code id=flow-content:the-h1,-h2,-h3,-h4,-h5,-and-h6-elements-6><a href=sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code><li><code id=flow-content:the-header-element><a href=sections.html#the-header-element>header</a></code><li><code id=flow-content:the-hgroup-element><a href=sections.html#the-hgroup-element>hgroup</a></code><li><code id=flow-content:the-hr-element><a href=grouping-content.html#the-hr-element>hr</a></code><li><code id=flow-content:the-i-element><a href=text-level-semantics.html#the-i-element>i</a></code><li><code id=flow-content:the-iframe-element><a href=iframe-embed-object.html#the-iframe-element>iframe</a></code><li><code id=flow-content:the-img-element><a href=embedded-content.html#the-img-element>img</a></code><li><code id=flow-content:the-input-element><a href=input.html#the-input-element>input</a></code><li><code id=flow-content:the-ins-element><a href=edits.html#the-ins-element>ins</a></code><li><code id=flow-content:the-kbd-element><a href=text-level-semantics.html#the-kbd-element>kbd</a></code><li><code id=flow-content:the-label-element><a href=forms.html#the-label-element>label</a></code><li><code id=flow-content:the-link-element><a href=semantics.html#the-link-element>link</a></code> (if it is <a id=flow-content:allowed-in-the-body href=semantics.html#allowed-in-the-body>allowed in the body</a>)<li><code id=flow-content:the-main-element><a href=grouping-content.html#the-main-element>main</a></code> (if it is a <a id=flow-content:hierarchically-correct-main-element href=grouping-content.html#hierarchically-correct-main-element>hierarchically correct <code>main</code> element</a>)<li><code id=flow-content:the-map-element-2><a href=image-maps.html#the-map-element>map</a></code><li><code id=flow-content:the-mark-element><a href=text-level-semantics.html#the-mark-element>mark</a></code><li><a id=flow-content:mathml-math href=https://w3c.github.io/mathml-core/#the-top-level-math-element data-x-internal=mathml-math>MathML <code>math</code></a><li><code id=flow-content:the-menu-element><a href=grouping-content.html#the-menu-element>menu</a></code><li><code id=flow-content:the-meta-element><a href=semantics.html#the-meta-element>meta</a></code> (if the <code id=flow-content:names:-the-itemprop-attribute><a href=microdata.html#names:-the-itemprop-attribute>itemprop</a></code> attribute is present)<li><code id=flow-content:the-meter-element><a href=form-elements.html#the-meter-element>meter</a></code><li><code id=flow-content:the-nav-element><a href=sections.html#the-nav-element>nav</a></code><li><code id=flow-content:the-noscript-element><a href=scripting.html#the-noscript-element>noscript</a></code><li><code id=flow-content:the-object-element><a href=iframe-embed-object.html#the-object-element>object</a></code><li><code id=flow-content:the-ol-element><a href=grouping-content.html#the-ol-element>ol</a></code><li><code id=flow-content:the-output-element><a href=form-elements.html#the-output-element>output</a></code><li><code id=flow-content:the-p-element><a href=grouping-content.html#the-p-element>p</a></code><li><code id=flow-content:the-picture-element><a href=embedded-content.html#the-picture-element>picture</a></code><li><code id=flow-content:the-pre-element><a href=grouping-content.html#the-pre-element>pre</a></code><li><code id=flow-content:the-progress-element><a href=form-elements.html#the-progress-element>progress</a></code><li><code id=flow-content:the-q-element><a href=text-level-semantics.html#the-q-element>q</a></code><li><code id=flow-content:the-ruby-element><a href=text-level-semantics.html#the-ruby-element>ruby</a></code><li><code id=flow-content:the-s-element><a href=text-level-semantics.html#the-s-element>s</a></code><li><code id=flow-content:the-samp-element><a href=text-level-semantics.html#the-samp-element>samp</a></code><li><code id=flow-content:the-script-element><a href=scripting.html#the-script-element>script</a></code><li><code id=flow-content:the-search-element><a href=grouping-content.html#the-search-element>search</a></code><li><code id=flow-content:the-section-element><a href=sections.html#the-section-element>section</a></code><li><code id=flow-content:the-select-element><a href=form-elements.html#the-select-element>select</a></code><li><code id=flow-content:the-slot-element><a href=scripting.html#the-slot-element>slot</a></code><li><code id=flow-content:the-small-element><a href=text-level-semantics.html#the-small-element>small</a></code><li><code id=flow-content:the-span-element><a href=text-level-semantics.html#the-span-element>span</a></code><li><code id=flow-content:the-strong-element><a href=text-level-semantics.html#the-strong-element>strong</a></code><li><code id=flow-content:the-sub-and-sup-elements><a href=text-level-semantics.html#the-sub-and-sup-elements>sub</a></code><li><code id=flow-content:the-sub-and-sup-elements-2><a href=text-level-semantics.html#the-sub-and-sup-elements>sup</a></code><li><a id=flow-content:svg-svg href=https://svgwg.org/svg2-draft/struct.html#SVGElement data-x-internal=svg-svg>SVG <code>svg</code></a><li><code id=flow-content:the-table-element><a href=tables.html#the-table-element>table</a></code><li><code id=flow-content:the-template-element><a href=scripting.html#the-template-element>template</a></code><li><code id=flow-content:the-textarea-element><a href=form-elements.html#the-textarea-element>textarea</a></code><li><code id=flow-content:the-time-element><a href=text-level-semantics.html#the-time-element>time</a></code><li><code id=flow-content:the-u-element><a href=text-level-semantics.html#the-u-element>u</a></code><li><code id=flow-content:the-ul-element><a href=grouping-content.html#the-ul-element>ul</a></code><li><code id=flow-content:the-var-element><a href=text-level-semantics.html#the-var-element>var</a></code><li><code id=flow-content:the-video-element><a href=media.html#the-video-element>video</a></code><li><code id=flow-content:the-wbr-element><a href=text-level-semantics.html#the-wbr-element>wbr</a></code><li><a href=custom-elements.html#autonomous-custom-element id=flow-content:autonomous-custom-element>autonomous custom elements</a><li><a href=#text-content id=flow-content:text-content>text</a></ul>


  <h6 id=sectioning-content><span class=secno>3.2.4.2.3</span> Sectioning content<a href=#sectioning-content class=self-link></a></h6>

  <p><dfn id=sectioning-content-2 data-export="">Sectioning content</dfn> is content that defines the scope of <code id=sectioning-content:the-header-element><a href=sections.html#the-header-element>header</a></code>
  and <code id=sectioning-content:the-footer-element><a href=sections.html#the-footer-element>footer</a></code> elements.</p>

  
  <ul class="brief category-list"><li><code id=sectioning-content:the-article-element><a href=sections.html#the-article-element>article</a></code><li><code id=sectioning-content:the-aside-element><a href=sections.html#the-aside-element>aside</a></code><li><code id=sectioning-content:the-nav-element><a href=sections.html#the-nav-element>nav</a></code><li><code id=sectioning-content:the-section-element><a href=sections.html#the-section-element>section</a></code></ul>


  <h6 id=heading-content><span class=secno>3.2.4.2.4</span> Heading content<a href=#heading-content class=self-link></a></h6>

  <p><dfn id=heading-content-2 data-export="">Heading content</dfn> defines the heading of a section (whether explicitly marked
  up using <a href=#sectioning-content-2 id=heading-content:sectioning-content-2>sectioning content</a> elements, or implied by the heading content itself).</p>

  
  <ul class="brief category-list"><li><code id=heading-content:the-h1,-h2,-h3,-h4,-h5,-and-h6-elements><a href=sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code><li><code id=heading-content:the-h1,-h2,-h3,-h4,-h5,-and-h6-elements-2><a href=sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h2</a></code><li><code id=heading-content:the-h1,-h2,-h3,-h4,-h5,-and-h6-elements-3><a href=sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h3</a></code><li><code id=heading-content:the-h1,-h2,-h3,-h4,-h5,-and-h6-elements-4><a href=sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h4</a></code><li><code id=heading-content:the-h1,-h2,-h3,-h4,-h5,-and-h6-elements-5><a href=sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h5</a></code><li><code id=heading-content:the-h1,-h2,-h3,-h4,-h5,-and-h6-elements-6><a href=sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code><li><code id=heading-content:the-hgroup-element><a href=sections.html#the-hgroup-element>hgroup</a></code> (if it has a descendant <code id=heading-content:the-h1,-h2,-h3,-h4,-h5,-and-h6-elements-7><a href=sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code> to <code id=heading-content:the-h1,-h2,-h3,-h4,-h5,-and-h6-elements-8><a href=sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code> element)</ul>


  <h6 id=phrasing-content><span class=secno>3.2.4.2.5</span> Phrasing content<a href=#phrasing-content class=self-link></a></h6>

  <p><dfn id=phrasing-content-2 data-export="">Phrasing content</dfn> is the text of the document, as well as elements that mark
  up that text at the intra-paragraph level. Runs of <a href=#phrasing-content-2 id=phrasing-content:phrasing-content-2>phrasing content</a> form <a href=#paragraph id=phrasing-content:paragraph>paragraphs</a>.</p>

  
  <ul class="brief category-list"><li><code id=phrasing-content:the-a-element><a href=text-level-semantics.html#the-a-element>a</a></code><li><code id=phrasing-content:the-abbr-element><a href=text-level-semantics.html#the-abbr-element>abbr</a></code><li><code id=phrasing-content:the-area-element><a href=image-maps.html#the-area-element>area</a></code> (if it is a descendant of a <code id=phrasing-content:the-map-element><a href=image-maps.html#the-map-element>map</a></code> element)<li><code id=phrasing-content:the-audio-element><a href=media.html#the-audio-element>audio</a></code><li><code id=phrasing-content:the-b-element><a href=text-level-semantics.html#the-b-element>b</a></code><li><code id=phrasing-content:the-bdi-element><a href=text-level-semantics.html#the-bdi-element>bdi</a></code><li><code id=phrasing-content:the-bdo-element><a href=text-level-semantics.html#the-bdo-element>bdo</a></code><li><code id=phrasing-content:the-br-element><a href=text-level-semantics.html#the-br-element>br</a></code><li><code id=phrasing-content:the-button-element><a href=form-elements.html#the-button-element>button</a></code><li><code id=phrasing-content:the-canvas-element><a href=canvas.html#the-canvas-element>canvas</a></code><li><code id=phrasing-content:the-cite-element><a href=text-level-semantics.html#the-cite-element>cite</a></code><li><code id=phrasing-content:the-code-element><a href=text-level-semantics.html#the-code-element>code</a></code><li><code id=phrasing-content:the-data-element><a href=text-level-semantics.html#the-data-element>data</a></code><li><code id=phrasing-content:the-datalist-element><a href=form-elements.html#the-datalist-element>datalist</a></code><li><code id=phrasing-content:the-del-element><a href=edits.html#the-del-element>del</a></code><li><code id=phrasing-content:the-dfn-element><a href=text-level-semantics.html#the-dfn-element>dfn</a></code><li><code id=phrasing-content:the-em-element><a href=text-level-semantics.html#the-em-element>em</a></code><li><code id=phrasing-content:the-embed-element><a href=iframe-embed-object.html#the-embed-element>embed</a></code><li><code id=phrasing-content:the-i-element><a href=text-level-semantics.html#the-i-element>i</a></code><li><code id=phrasing-content:the-iframe-element><a href=iframe-embed-object.html#the-iframe-element>iframe</a></code><li><code id=phrasing-content:the-img-element><a href=embedded-content.html#the-img-element>img</a></code><li><code id=phrasing-content:the-input-element><a href=input.html#the-input-element>input</a></code><li><code id=phrasing-content:the-ins-element><a href=edits.html#the-ins-element>ins</a></code><li><code id=phrasing-content:the-kbd-element><a href=text-level-semantics.html#the-kbd-element>kbd</a></code><li><code id=phrasing-content:the-label-element><a href=forms.html#the-label-element>label</a></code><li><code id=phrasing-content:the-link-element><a href=semantics.html#the-link-element>link</a></code> (if it is <a id=phrasing-content:allowed-in-the-body href=semantics.html#allowed-in-the-body>allowed in the body</a>)<li><code id=phrasing-content:the-map-element-2><a href=image-maps.html#the-map-element>map</a></code><li><code id=phrasing-content:the-mark-element><a href=text-level-semantics.html#the-mark-element>mark</a></code><li><a id=phrasing-content:mathml-math href=https://w3c.github.io/mathml-core/#the-top-level-math-element data-x-internal=mathml-math>MathML <code>math</code></a><li><code id=phrasing-content:the-meta-element><a href=semantics.html#the-meta-element>meta</a></code> (if the <code id=phrasing-content:names:-the-itemprop-attribute><a href=microdata.html#names:-the-itemprop-attribute>itemprop</a></code> attribute is present)<li><code id=phrasing-content:the-meter-element><a href=form-elements.html#the-meter-element>meter</a></code><li><code id=phrasing-content:the-noscript-element><a href=scripting.html#the-noscript-element>noscript</a></code><li><code id=phrasing-content:the-object-element><a href=iframe-embed-object.html#the-object-element>object</a></code><li><code id=phrasing-content:the-output-element><a href=form-elements.html#the-output-element>output</a></code><li><code id=phrasing-content:the-picture-element><a href=embedded-content.html#the-picture-element>picture</a></code><li><code id=phrasing-content:the-progress-element><a href=form-elements.html#the-progress-element>progress</a></code><li><code id=phrasing-content:the-q-element><a href=text-level-semantics.html#the-q-element>q</a></code><li><code id=phrasing-content:the-ruby-element><a href=text-level-semantics.html#the-ruby-element>ruby</a></code><li><code id=phrasing-content:the-s-element><a href=text-level-semantics.html#the-s-element>s</a></code><li><code id=phrasing-content:the-samp-element><a href=text-level-semantics.html#the-samp-element>samp</a></code><li><code id=phrasing-content:the-script-element><a href=scripting.html#the-script-element>script</a></code><li><code id=phrasing-content:the-select-element><a href=form-elements.html#the-select-element>select</a></code><li><code id=phrasing-content:the-selectedcontent-element><a href=form-elements.html#the-selectedcontent-element>selectedcontent</a></code> (if it is a descendant of a <code id=phrasing-content:the-button-element-2><a href=form-elements.html#the-button-element>button</a></code> in a
   <code id=phrasing-content:the-select-element-2><a href=form-elements.html#the-select-element>select</a></code>)<li><code id=phrasing-content:the-slot-element><a href=scripting.html#the-slot-element>slot</a></code><li><code id=phrasing-content:the-small-element><a href=text-level-semantics.html#the-small-element>small</a></code><li><code id=phrasing-content:the-span-element><a href=text-level-semantics.html#the-span-element>span</a></code><li><code id=phrasing-content:the-strong-element><a href=text-level-semantics.html#the-strong-element>strong</a></code><li><code id=phrasing-content:the-sub-and-sup-elements><a href=text-level-semantics.html#the-sub-and-sup-elements>sub</a></code><li><code id=phrasing-content:the-sub-and-sup-elements-2><a href=text-level-semantics.html#the-sub-and-sup-elements>sup</a></code><li><a id=phrasing-content:svg-svg href=https://svgwg.org/svg2-draft/struct.html#SVGElement data-x-internal=svg-svg>SVG <code>svg</code></a><li><code id=phrasing-content:the-template-element><a href=scripting.html#the-template-element>template</a></code><li><code id=phrasing-content:the-textarea-element><a href=form-elements.html#the-textarea-element>textarea</a></code><li><code id=phrasing-content:the-time-element><a href=text-level-semantics.html#the-time-element>time</a></code><li><code id=phrasing-content:the-u-element><a href=text-level-semantics.html#the-u-element>u</a></code><li><code id=phrasing-content:the-var-element><a href=text-level-semantics.html#the-var-element>var</a></code><li><code id=phrasing-content:the-video-element><a href=media.html#the-video-element>video</a></code><li><code id=phrasing-content:the-wbr-element><a href=text-level-semantics.html#the-wbr-element>wbr</a></code><li><a href=custom-elements.html#autonomous-custom-element id=phrasing-content:autonomous-custom-element>autonomous custom elements</a><li><a href=#text-content id=phrasing-content:text-content>text</a></ul>

  <p class=note>Most elements that are categorized as phrasing content can only contain elements
  that are themselves categorized as phrasing content, not any flow content.</p>

  <p><dfn id=text-content>Text</dfn>, in the context of content models, means either nothing,
  or <code id=phrasing-content:text><a data-x-internal=text href=https://dom.spec.whatwg.org/#interface-text>Text</a></code> nodes. <a href=#text-content id=phrasing-content:text-content-2>Text</a> is sometimes used as a content
  model on its own, but is also <a href=#phrasing-content-2 id=phrasing-content:phrasing-content-2-2>phrasing content</a>, and can be <a href=#inter-element-whitespace id=phrasing-content:inter-element-whitespace>inter-element
  whitespace</a> (if the <code id=phrasing-content:text-2><a data-x-internal=text href=https://dom.spec.whatwg.org/#interface-text>Text</a></code> nodes are empty or contain just <a id=phrasing-content:space-characters href=https://infra.spec.whatwg.org/#ascii-whitespace data-x-internal=space-characters>ASCII
  whitespace</a>).</p>

  <p><code id=phrasing-content:text-3><a data-x-internal=text href=https://dom.spec.whatwg.org/#interface-text>Text</a></code> nodes and attribute values must consist of <a href=https://infra.spec.whatwg.org/#scalar-value id=phrasing-content:scalar-value data-x-internal=scalar-value>scalar
  values</a>, excluding <a href=https://infra.spec.whatwg.org/#noncharacter id=phrasing-content:noncharacter data-x-internal=noncharacter>noncharacters</a>, and <a href=https://infra.spec.whatwg.org/#control id=phrasing-content:control data-x-internal=control>controls</a> other than <a id=phrasing-content:space-characters-2 href=https://infra.spec.whatwg.org/#ascii-whitespace data-x-internal=space-characters>ASCII whitespace</a>.

   
  

  This specification includes extra constraints on the exact value of <code id=phrasing-content:text-4><a data-x-internal=text href=https://dom.spec.whatwg.org/#interface-text>Text</a></code> nodes and
  attribute values depending on their precise context.

  

  </p>



  <h6 id=embedded-content-2><span class=secno>3.2.4.2.6</span> Embedded content<a href=#embedded-content-2 class=self-link></a></h6>

  <p><dfn id=embedded-content-category data-export="">Embedded content</dfn> is content that imports
  another resource into the document, or content from another vocabulary that
  is inserted into the document.</p>

  
  <ul class="brief category-list"><li><code id=embedded-content-2:the-audio-element><a href=media.html#the-audio-element>audio</a></code><li><code id=embedded-content-2:the-canvas-element><a href=canvas.html#the-canvas-element>canvas</a></code><li><code id=embedded-content-2:the-embed-element><a href=iframe-embed-object.html#the-embed-element>embed</a></code><li><code id=embedded-content-2:the-iframe-element><a href=iframe-embed-object.html#the-iframe-element>iframe</a></code><li><code id=embedded-content-2:the-img-element><a href=embedded-content.html#the-img-element>img</a></code><li><a id=embedded-content-2:mathml-math href=https://w3c.github.io/mathml-core/#the-top-level-math-element data-x-internal=mathml-math>MathML <code>math</code></a><li><code id=embedded-content-2:the-object-element><a href=iframe-embed-object.html#the-object-element>object</a></code><li><code id=embedded-content-2:the-picture-element><a href=embedded-content.html#the-picture-element>picture</a></code><li><a id=embedded-content-2:svg-svg href=https://svgwg.org/svg2-draft/struct.html#SVGElement data-x-internal=svg-svg>SVG <code>svg</code></a><li><code id=embedded-content-2:the-video-element><a href=media.html#the-video-element>video</a></code></ul>

  <p>Elements that are from namespaces other than the <a id=embedded-content-2:html-namespace-2 href=https://infra.spec.whatwg.org/#html-namespace data-x-internal=html-namespace-2>HTML namespace</a> and that convey
  content but not metadata, are <a href=#embedded-content-category id=embedded-content-2:embedded-content-category>embedded content</a> for the purposes of the content models
  defined in this specification. (For example, MathML or SVG.)</p>

  <p>Some embedded content elements can have <dfn id=fallback-content>fallback content</dfn>: content that is to be used
  when the external resource cannot be used (e.g. because it is of an unsupported format). The
  element definitions state what the fallback is, if any.</p>
  


  <h6 id=interactive-content><span class=secno>3.2.4.2.7</span> Interactive content<a href=#interactive-content class=self-link></a></h6>



  <p><dfn id=interactive-content-2 data-export="">Interactive content</dfn> is content that is specifically intended for user
  interaction.</p>

  
  <ul class="brief category-list"><li><code id=interactive-content:the-a-element><a href=text-level-semantics.html#the-a-element>a</a></code> (if the <code id=interactive-content:attr-hyperlink-href><a href=links.html#attr-hyperlink-href>href</a></code> attribute is present)<li><code id=interactive-content:the-audio-element><a href=media.html#the-audio-element>audio</a></code> (if the <code id=interactive-content:attr-media-controls><a href=media.html#attr-media-controls>controls</a></code> attribute is present)<li><code id=interactive-content:the-button-element><a href=form-elements.html#the-button-element>button</a></code><li><code id=interactive-content:the-details-element><a href=interactive-elements.html#the-details-element>details</a></code><li><code id=interactive-content:the-embed-element><a href=iframe-embed-object.html#the-embed-element>embed</a></code><li><code id=interactive-content:the-iframe-element><a href=iframe-embed-object.html#the-iframe-element>iframe</a></code><li><code id=interactive-content:the-img-element><a href=embedded-content.html#the-img-element>img</a></code> (if the <code id=interactive-content:attr-hyperlink-usemap><a href=image-maps.html#attr-hyperlink-usemap>usemap</a></code> attribute is present)<li><code id=interactive-content:the-input-element><a href=input.html#the-input-element>input</a></code> (if the <code id=interactive-content:attr-input-type><a href=input.html#attr-input-type>type</a></code> attribute is <em>not</em> in the <a href="input.html#hidden-state-(type=hidden)" id="interactive-content:hidden-state-(type=hidden)">Hidden</a> state)<li><code id=interactive-content:the-label-element><a href=forms.html#the-label-element>label</a></code><li><code id=interactive-content:the-select-element><a href=form-elements.html#the-select-element>select</a></code><li><code id=interactive-content:the-textarea-element><a href=form-elements.html#the-textarea-element>textarea</a></code><li><code id=interactive-content:the-video-element><a href=media.html#the-video-element>video</a></code> (if the <code id=interactive-content:attr-media-controls-2><a href=media.html#attr-media-controls>controls</a></code> attribute is present)</ul>



  <h6 id=palpable-content><span class=secno>3.2.4.2.8</span> Palpable content<a href=#palpable-content class=self-link></a></h6>

  <p>As a general rule, elements whose content model allows any <a href=#flow-content-2 id=palpable-content:flow-content-2>flow content</a> or
  <a href=#phrasing-content-2 id=palpable-content:phrasing-content-2>phrasing content</a> should have at least one node in its <a href=#concept-html-contents id=palpable-content:concept-html-contents>contents</a> that is <dfn id=palpable-content-2 data-export="">palpable content</dfn> and
  that does not have the <code id=palpable-content:attr-hidden><a href=interaction.html#attr-hidden>hidden</a></code> attribute specified.</p>

  <p class=note><a href=#palpable-content-2 id=palpable-content:palpable-content-2>Palpable content</a> makes an element non-empty by providing either
  some descendant non-empty <a href=#text-content id=palpable-content:text-content>text</a>, or else something users can
  hear (<code id=palpable-content:the-audio-element><a href=media.html#the-audio-element>audio</a></code> elements) or view (<code id=palpable-content:the-video-element><a href=media.html#the-video-element>video</a></code>, <code id=palpable-content:the-img-element><a href=embedded-content.html#the-img-element>img</a></code>, or
  <code id=palpable-content:the-canvas-element><a href=canvas.html#the-canvas-element>canvas</a></code> elements) or otherwise interact with (for example, interactive form
  controls).</p>

  <p>This requirement is not a hard requirement, however, as there are many cases where an element
  can be empty legitimately, for example when it is used as a placeholder which will later be filled
  in by a script, or when the element is part of a template and would on most pages be filled in but
  on some pages is not relevant.</p>

  <p>Conformance checkers are encouraged to provide a mechanism for authors to find elements that
  fail to fulfill this requirement, as an authoring aid.</p>

  <p>The following elements are palpable content:</p>

  
  <ul class="brief category-list"><li><code id=palpable-content:the-a-element><a href=text-level-semantics.html#the-a-element>a</a></code><li><code id=palpable-content:the-abbr-element><a href=text-level-semantics.html#the-abbr-element>abbr</a></code><li><code id=palpable-content:the-address-element><a href=sections.html#the-address-element>address</a></code><li><code id=palpable-content:the-article-element><a href=sections.html#the-article-element>article</a></code><li><code id=palpable-content:the-aside-element><a href=sections.html#the-aside-element>aside</a></code><li><code id=palpable-content:the-audio-element-2><a href=media.html#the-audio-element>audio</a></code> (if the <code id=palpable-content:attr-media-controls><a href=media.html#attr-media-controls>controls</a></code> attribute is present)<li><code id=palpable-content:the-b-element><a href=text-level-semantics.html#the-b-element>b</a></code><li><code id=palpable-content:the-bdi-element><a href=text-level-semantics.html#the-bdi-element>bdi</a></code><li><code id=palpable-content:the-bdo-element><a href=text-level-semantics.html#the-bdo-element>bdo</a></code><li><code id=palpable-content:the-blockquote-element><a href=grouping-content.html#the-blockquote-element>blockquote</a></code><li><code id=palpable-content:the-button-element><a href=form-elements.html#the-button-element>button</a></code><li><code id=palpable-content:the-canvas-element-2><a href=canvas.html#the-canvas-element>canvas</a></code><li><code id=palpable-content:the-cite-element><a href=text-level-semantics.html#the-cite-element>cite</a></code><li><code id=palpable-content:the-code-element><a href=text-level-semantics.html#the-code-element>code</a></code><li><code id=palpable-content:the-data-element><a href=text-level-semantics.html#the-data-element>data</a></code><li><code id=palpable-content:the-del-element><a href=edits.html#the-del-element>del</a></code><li><code id=palpable-content:the-details-element><a href=interactive-elements.html#the-details-element>details</a></code><li><code id=palpable-content:the-dfn-element><a href=text-level-semantics.html#the-dfn-element>dfn</a></code><li><code id=palpable-content:the-div-element><a href=grouping-content.html#the-div-element>div</a></code><li><code id=palpable-content:the-dl-element><a href=grouping-content.html#the-dl-element>dl</a></code> (if the element's children include at least one name-value group)<li><code id=palpable-content:the-em-element><a href=text-level-semantics.html#the-em-element>em</a></code><li><code id=palpable-content:the-embed-element><a href=iframe-embed-object.html#the-embed-element>embed</a></code><li><code id=palpable-content:the-fieldset-element><a href=form-elements.html#the-fieldset-element>fieldset</a></code><li><code id=palpable-content:the-figure-element><a href=grouping-content.html#the-figure-element>figure</a></code><li><code id=palpable-content:the-footer-element><a href=sections.html#the-footer-element>footer</a></code><li><code id=palpable-content:the-form-element><a href=forms.html#the-form-element>form</a></code><li><code id=palpable-content:the-h1,-h2,-h3,-h4,-h5,-and-h6-elements><a href=sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code><li><code id=palpable-content:the-h1,-h2,-h3,-h4,-h5,-and-h6-elements-2><a href=sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h2</a></code><li><code id=palpable-content:the-h1,-h2,-h3,-h4,-h5,-and-h6-elements-3><a href=sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h3</a></code><li><code id=palpable-content:the-h1,-h2,-h3,-h4,-h5,-and-h6-elements-4><a href=sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h4</a></code><li><code id=palpable-content:the-h1,-h2,-h3,-h4,-h5,-and-h6-elements-5><a href=sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h5</a></code><li><code id=palpable-content:the-h1,-h2,-h3,-h4,-h5,-and-h6-elements-6><a href=sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code><li><code id=palpable-content:the-header-element><a href=sections.html#the-header-element>header</a></code><li><code id=palpable-content:the-hgroup-element><a href=sections.html#the-hgroup-element>hgroup</a></code><li><code id=palpable-content:the-i-element><a href=text-level-semantics.html#the-i-element>i</a></code><li><code id=palpable-content:the-iframe-element><a href=iframe-embed-object.html#the-iframe-element>iframe</a></code><li><code id=palpable-content:the-img-element-2><a href=embedded-content.html#the-img-element>img</a></code><li><code id=palpable-content:the-input-element><a href=input.html#the-input-element>input</a></code> (if the <code id=palpable-content:attr-input-type><a href=input.html#attr-input-type>type</a></code> attribute is <em>not</em> in the <a href="input.html#hidden-state-(type=hidden)" id="palpable-content:hidden-state-(type=hidden)">Hidden</a> state)<li><code id=palpable-content:the-ins-element><a href=edits.html#the-ins-element>ins</a></code><li><code id=palpable-content:the-kbd-element><a href=text-level-semantics.html#the-kbd-element>kbd</a></code><li><code id=palpable-content:the-label-element><a href=forms.html#the-label-element>label</a></code><li><code id=palpable-content:the-main-element><a href=grouping-content.html#the-main-element>main</a></code><li><code id=palpable-content:the-map-element><a href=image-maps.html#the-map-element>map</a></code><li><code id=palpable-content:the-mark-element><a href=text-level-semantics.html#the-mark-element>mark</a></code><li><a id=palpable-content:mathml-math href=https://w3c.github.io/mathml-core/#the-top-level-math-element data-x-internal=mathml-math>MathML <code>math</code></a><li><code id=palpable-content:the-menu-element><a href=grouping-content.html#the-menu-element>menu</a></code> (if the element's children include at least one <code id=palpable-content:the-li-element><a href=grouping-content.html#the-li-element>li</a></code> element)<li><code id=palpable-content:the-meter-element><a href=form-elements.html#the-meter-element>meter</a></code><li><code id=palpable-content:the-nav-element><a href=sections.html#the-nav-element>nav</a></code><li><code id=palpable-content:the-object-element><a href=iframe-embed-object.html#the-object-element>object</a></code><li><code id=palpable-content:the-ol-element><a href=grouping-content.html#the-ol-element>ol</a></code> (if the element's children include at least one <code id=palpable-content:the-li-element-2><a href=grouping-content.html#the-li-element>li</a></code> element)<li><code id=palpable-content:the-output-element><a href=form-elements.html#the-output-element>output</a></code><li><code id=palpable-content:the-p-element><a href=grouping-content.html#the-p-element>p</a></code><li><code id=palpable-content:the-picture-element><a href=embedded-content.html#the-picture-element>picture</a></code><li><code id=palpable-content:the-pre-element><a href=grouping-content.html#the-pre-element>pre</a></code><li><code id=palpable-content:the-progress-element><a href=form-elements.html#the-progress-element>progress</a></code><li><code id=palpable-content:the-q-element><a href=text-level-semantics.html#the-q-element>q</a></code><li><code id=palpable-content:the-ruby-element><a href=text-level-semantics.html#the-ruby-element>ruby</a></code><li><code id=palpable-content:the-s-element><a href=text-level-semantics.html#the-s-element>s</a></code><li><code id=palpable-content:the-samp-element><a href=text-level-semantics.html#the-samp-element>samp</a></code><li><code id=palpable-content:the-search-element><a href=grouping-content.html#the-search-element>search</a></code><li><code id=palpable-content:the-section-element><a href=sections.html#the-section-element>section</a></code><li><code id=palpable-content:the-select-element><a href=form-elements.html#the-select-element>select</a></code><li><code id=palpable-content:the-small-element><a href=text-level-semantics.html#the-small-element>small</a></code><li><code id=palpable-content:the-span-element><a href=text-level-semantics.html#the-span-element>span</a></code><li><code id=palpable-content:the-strong-element><a href=text-level-semantics.html#the-strong-element>strong</a></code><li><code id=palpable-content:the-sub-and-sup-elements><a href=text-level-semantics.html#the-sub-and-sup-elements>sub</a></code><li><code id=palpable-content:the-sub-and-sup-elements-2><a href=text-level-semantics.html#the-sub-and-sup-elements>sup</a></code><li><a id=palpable-content:svg-svg href=https://svgwg.org/svg2-draft/struct.html#SVGElement data-x-internal=svg-svg>SVG <code>svg</code></a><li><code id=palpable-content:the-table-element><a href=tables.html#the-table-element>table</a></code><li><code id=palpable-content:the-textarea-element><a href=form-elements.html#the-textarea-element>textarea</a></code><li><code id=palpable-content:the-time-element><a href=text-level-semantics.html#the-time-element>time</a></code><li><code id=palpable-content:the-u-element><a href=text-level-semantics.html#the-u-element>u</a></code><li><code id=palpable-content:the-ul-element><a href=grouping-content.html#the-ul-element>ul</a></code> (if the element's children include at least one <code id=palpable-content:the-li-element-3><a href=grouping-content.html#the-li-element>li</a></code> element)<li><code id=palpable-content:the-var-element><a href=text-level-semantics.html#the-var-element>var</a></code><li><code id=palpable-content:the-video-element-2><a href=media.html#the-video-element>video</a></code><li><a href=custom-elements.html#autonomous-custom-element id=palpable-content:autonomous-custom-element>autonomous custom elements</a><li><a href=#text-content id=palpable-content:text-content-2>text</a> that is not <a href=#inter-element-whitespace id=palpable-content:inter-element-whitespace>inter-element whitespace</a></ul>


  <h6 id=script-supporting-elements><span class=secno>3.2.4.2.9</span> Script-supporting elements<a href=#script-supporting-elements class=self-link></a></h6>

  <p><dfn id=script-supporting-elements-2>Script-supporting elements</dfn> are those that do not <a href=#represents id=script-supporting-elements:represents>represent</a> anything themselves (i.e. they are not rendered), but are
  used to support scripts, e.g. to provide functionality for the user.</p>

  <p>The following elements are script-supporting elements:</p>

  
  <ul class="brief category-list"><li><code id=script-supporting-elements:the-script-element><a href=scripting.html#the-script-element>script</a></code><li><code id=script-supporting-elements:the-template-element><a href=scripting.html#the-template-element>template</a></code></ul>


  <h6 id=select-element-inner-content-elements><span class=secno>3.2.4.2.10</span> <code id=select-element-inner-content-elements:the-select-element><a href=form-elements.html#the-select-element>select</a></code> element inner content elements<a href=#select-element-inner-content-elements class=self-link></a></h6>

  <p><dfn id=select-element-inner-content-elements-2><code>select</code> element inner content elements</dfn> are the elements which are
  allowed as descendants of <code id=select-element-inner-content-elements:the-select-element-2><a href=form-elements.html#the-select-element>select</a></code> elements.</p>

  <p>The following are <a href=#select-element-inner-content-elements-2 id=select-element-inner-content-elements:select-element-inner-content-elements-2><code>select</code> element inner content elements</a>:</p>

  <ul class="brief category-list"><li><code id=select-element-inner-content-elements:the-option-element><a href=form-elements.html#the-option-element>option</a></code><li><code id=select-element-inner-content-elements:the-optgroup-element><a href=form-elements.html#the-optgroup-element>optgroup</a></code><li><code id=select-element-inner-content-elements:the-hr-element><a href=grouping-content.html#the-hr-element>hr</a></code><li><a href=#script-supporting-elements-2 id=select-element-inner-content-elements:script-supporting-elements-2>script-supporting elements</a><li><code id=select-element-inner-content-elements:the-noscript-element><a href=scripting.html#the-noscript-element>noscript</a></code><li><code id=select-element-inner-content-elements:the-div-element><a href=grouping-content.html#the-div-element>div</a></code></ul>

  <h6 id=optgroup-element-inner-content-elements><span class=secno>3.2.4.2.11</span> <code id=optgroup-element-inner-content-elements:the-optgroup-element><a href=form-elements.html#the-optgroup-element>optgroup</a></code> element inner content elements<a href=#optgroup-element-inner-content-elements class=self-link></a></h6>

  <p><dfn id=optgroup-element-inner-content-elements-2><code>optgroup</code> element inner content elements</dfn> are the elements which are
  allowed as descendants of <code id=optgroup-element-inner-content-elements:the-optgroup-element-2><a href=form-elements.html#the-optgroup-element>optgroup</a></code> elements.</p>

  <p>The following are <a href=#optgroup-element-inner-content-elements-2 id=optgroup-element-inner-content-elements:optgroup-element-inner-content-elements-2><code>optgroup</code> element inner content elements</a>:</p>

  <ul class="brief category-list"><li><code id=optgroup-element-inner-content-elements:the-option-element><a href=form-elements.html#the-option-element>option</a></code><li><a href=#script-supporting-elements-2 id=optgroup-element-inner-content-elements:script-supporting-elements-2>script-supporting elements</a><li><code id=optgroup-element-inner-content-elements:the-noscript-element><a href=scripting.html#the-noscript-element>noscript</a></code><li><code id=optgroup-element-inner-content-elements:the-div-element><a href=grouping-content.html#the-div-element>div</a></code></ul>

  <h6 id=option-element-inner-content-elements><span class=secno>3.2.4.2.12</span> <code id=option-element-inner-content-elements:the-option-element><a href=form-elements.html#the-option-element>option</a></code> element inner content elements<a href=#option-element-inner-content-elements class=self-link></a></h6>

  <p><dfn id=option-element-inner-content-elements-2><code>option</code> element inner content elements</dfn> are the elements which are
  allowed as descendants of <code id=option-element-inner-content-elements:the-option-element-2><a href=form-elements.html#the-option-element>option</a></code> elements.</p>

  <p>The following are <a href=#option-element-inner-content-elements-2 id=option-element-inner-content-elements:option-element-inner-content-elements-2><code>option</code> element inner content elements</a>:</p>

  <ul class="brief category-list"><li><code id=option-element-inner-content-elements:the-div-element><a href=grouping-content.html#the-div-element>div</a></code><li><a href=#phrasing-content-2 id=option-element-inner-content-elements:phrasing-content-2>phrasing content</a> that is not in the following exclusion list</ul>

  <p>The following are excluded from <a href=#option-element-inner-content-elements-2 id=option-element-inner-content-elements:option-element-inner-content-elements-2-2><code>option</code> element inner content
  elements</a>:</p>

  

  <ul class="brief category-list"><li><code id=option-element-inner-content-elements:the-datalist-element><a href=form-elements.html#the-datalist-element>datalist</a></code><li><code id=option-element-inner-content-elements:the-object-element><a href=iframe-embed-object.html#the-object-element>object</a></code><li><a href=#interactive-content-2 id=option-element-inner-content-elements:interactive-content-2>interactive content</a><li>elements with the <code id=option-element-inner-content-elements:attr-tabindex><a href=interaction.html#attr-tabindex>tabindex</a></code> attribute specified</ul>



  <h5 id=transparent-content-models><span class=secno>3.2.4.3</span> Transparent content models<a href=#transparent-content-models class=self-link></a></h5>

  <p>Some elements are described as <dfn id=transparent>transparent</dfn>; they have "transparent" in the
  description of their content model. The content model of a <a href=#transparent id=transparent-content-models:transparent>transparent</a> element is
  derived from the content model of its parent element: the elements required in the part of the
  content model that is "transparent" are the same elements as required in the part of the content
  model of the parent of the transparent element in which the transparent element finds itself.</p>

  <div class=example>

   <p>For instance, an <code id=transparent-content-models:the-ins-element><a href=edits.html#the-ins-element>ins</a></code> element inside a <code id=transparent-content-models:the-ruby-element><a href=text-level-semantics.html#the-ruby-element>ruby</a></code> element cannot contain an
   <code id=transparent-content-models:the-rt-element><a href=text-level-semantics.html#the-rt-element>rt</a></code> element, because the part of the <code id=transparent-content-models:the-ruby-element-2><a href=text-level-semantics.html#the-ruby-element>ruby</a></code> element's content model that
   allows <code id=transparent-content-models:the-ins-element-2><a href=edits.html#the-ins-element>ins</a></code> elements is the part that allows <a href=#phrasing-content-2 id=transparent-content-models:phrasing-content-2>phrasing content</a>, and the
   <code id=transparent-content-models:the-rt-element-2><a href=text-level-semantics.html#the-rt-element>rt</a></code> element is not <a href=#phrasing-content-2 id=transparent-content-models:phrasing-content-2-2>phrasing content</a>.</p>

  </div>



  <p class=note>In some cases, where transparent elements are nested in each other, the process
  has to be applied iteratively.</p>

  <div class=example>
   <p>Consider the following markup fragment:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>object</c-><c- p>&gt;&lt;</c-><c- f>ins</c-><c- p>&gt;&lt;</c-><c- f>map</c-><c- p>&gt;&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;/&quot;</c-><c- p>&gt;</c->Apples<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;&lt;/</c-><c- f>map</c-><c- p>&gt;&lt;/</c-><c- f>ins</c-><c- p>&gt;&lt;/</c-><c- f>object</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

   <p>To check whether "Apples" is allowed inside the <code id=transparent-content-models:the-a-element><a href=text-level-semantics.html#the-a-element>a</a></code> element, the content models are
   examined. The <code id=transparent-content-models:the-a-element-2><a href=text-level-semantics.html#the-a-element>a</a></code> element's content model is transparent, as is the <code id=transparent-content-models:the-map-element><a href=image-maps.html#the-map-element>map</a></code>
   element's, as is the <code id=transparent-content-models:the-ins-element-3><a href=edits.html#the-ins-element>ins</a></code> element's, as is the <code id=transparent-content-models:the-object-element><a href=iframe-embed-object.html#the-object-element>object</a></code> element's. The
   <code id=transparent-content-models:the-object-element-2><a href=iframe-embed-object.html#the-object-element>object</a></code> element is found in the <code id=transparent-content-models:the-p-element><a href=grouping-content.html#the-p-element>p</a></code> element, whose content model is
   <a href=#phrasing-content-2 id=transparent-content-models:phrasing-content-2-3>phrasing content</a>. Thus, "Apples" is allowed, as text is phrasing content.</p>
  </div>

  <p>When a transparent element has no parent, then the part of its content model that is
  "transparent" must instead be treated as accepting any <a href=#flow-content-2 id=transparent-content-models:flow-content-2>flow content</a>.</p>


  <h5 id=paragraphs><span class=secno>3.2.4.4</span> Paragraphs<a href=#paragraphs class=self-link></a></h5>

  <p class=note>The term <a href=#paragraph id=paragraphs:paragraph>paragraph</a> as defined in this section is used for more than
  just the definition of the <code id=paragraphs:the-p-element><a href=grouping-content.html#the-p-element>p</a></code> element. The <a href=#paragraph id=paragraphs:paragraph-2>paragraph</a> concept defined here
  is used to describe how to interpret documents. The <code id=paragraphs:the-p-element-2><a href=grouping-content.html#the-p-element>p</a></code> element is merely one of
  several ways of marking up a <a href=#paragraph id=paragraphs:paragraph-3>paragraph</a>.</p>

  
  <p>A <dfn id=paragraph>paragraph</dfn> is typically a run of <a href=#phrasing-content-2 id=paragraphs:phrasing-content-2>phrasing content</a> that forms a block
  of text with one or more sentences that discuss a particular topic, as in typography, but can also
  be used for more general thematic grouping. For instance, an address is also a paragraph, as is a
  part of a form, a byline, or a stanza in a poem.</p>

  <div class=example>

   <p>In the following example, there are two paragraphs in a section. There is also a heading,
   which contains phrasing content that is not a paragraph. Note how the comments and
   <a href=#inter-element-whitespace id=paragraphs:inter-element-whitespace>inter-element whitespace</a> do not form paragraphs.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>section</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>h2</c-><c- p>&gt;</c->Example of paragraphs<c- p>&lt;/</c-><c- f>h2</c-><c- p>&gt;</c->
  This is the <c- p>&lt;</c-><c- f>em</c-><c- p>&gt;</c->first<c- p>&lt;/</c-><c- f>em</c-><c- p>&gt;</c-> paragraph in this example.
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->This is the second.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- c>&lt;!-- This is not a paragraph. --&gt;</c->
<c- p>&lt;/</c-><c- f>section</c-><c- p>&gt;</c-></code></pre>

  </div>

  <p>Paragraphs in <a href=#flow-content-2 id=paragraphs:flow-content-2>flow content</a> are defined relative to what the document looks like
  without the <code id=paragraphs:the-a-element><a href=text-level-semantics.html#the-a-element>a</a></code>, <code id=paragraphs:the-ins-element><a href=edits.html#the-ins-element>ins</a></code>, <code id=paragraphs:the-del-element><a href=edits.html#the-del-element>del</a></code>, and <code id=paragraphs:the-map-element><a href=image-maps.html#the-map-element>map</a></code> elements
  complicating matters, since those elements, with their hybrid content models, can straddle
  paragraph boundaries, as shown in the first two examples below.</p>

  <p class=note>Generally, having elements straddle paragraph boundaries is best avoided.
  Maintaining such markup can be difficult.</p>

  <div class=example>

   <p>The following example takes the markup from the earlier example and puts <code id=paragraphs:the-ins-element-2><a href=edits.html#the-ins-element>ins</a></code> and
   <code id=paragraphs:the-del-element-2><a href=edits.html#the-del-element>del</a></code> elements around some of the markup to show that the text was changed (though in
   this case, the changes admittedly don't make much sense). Notice how this example has exactly the
   same paragraphs as the previous one, despite the <code id=paragraphs:the-ins-element-3><a href=edits.html#the-ins-element>ins</a></code> and <code id=paragraphs:the-del-element-3><a href=edits.html#the-del-element>del</a></code> elements
   — the <code id=paragraphs:the-ins-element-4><a href=edits.html#the-ins-element>ins</a></code> element straddles the heading and the first paragraph, and the
   <code id=paragraphs:the-del-element-4><a href=edits.html#the-del-element>del</a></code> element straddles the boundary between the two paragraphs.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>section</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>ins</c-><c- p>&gt;&lt;</c-><c- f>h2</c-><c- p>&gt;</c->Example of paragraphs<c- p>&lt;/</c-><c- f>h2</c-><c- p>&gt;</c->
  This is the <c- p>&lt;</c-><c- f>em</c-><c- p>&gt;</c->first<c- p>&lt;/</c-><c- f>em</c-><c- p>&gt;</c-> paragraph in<c- p>&lt;/</c-><c- f>ins</c-><c- p>&gt;</c-> this example<c- p>&lt;</c-><c- f>del</c-><c- p>&gt;</c->.
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->This is the second.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;&lt;/</c-><c- f>del</c-><c- p>&gt;</c->
  <c- c>&lt;!-- This is not a paragraph. --&gt;</c->
<c- p>&lt;/</c-><c- f>section</c-><c- p>&gt;</c-></code></pre>

  </div>

  

  <p>A <a href=#paragraph id=paragraphs:paragraph-4>paragraph</a> is also formed explicitly by <code id=paragraphs:the-p-element-3><a href=grouping-content.html#the-p-element>p</a></code> elements.</p>

  <p class=note>The <code id=paragraphs:the-p-element-4><a href=grouping-content.html#the-p-element>p</a></code> element can be used to wrap individual paragraphs when there
  would otherwise not be any content other than phrasing content to separate the paragraphs from
  each other.</p>

  <div class=example>

   <p>In the following example, the link spans half of the first paragraph, all of the heading
   separating the two paragraphs, and half of the second paragraph. It straddles the paragraphs and
   the heading.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>header</c-><c- p>&gt;</c->
 Welcome!
 <c- p>&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;about.html&quot;</c-><c- p>&gt;</c->
  This is home of...
  <c- p>&lt;</c-><c- f>h1</c-><c- p>&gt;</c->The Falcons!<c- p>&lt;/</c-><c- f>h1</c-><c- p>&gt;</c->
  The Lockheed Martin multirole jet fighter aircraft!
 <c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c->
 This page discusses the F-16 Fighting Falcon&apos;s innermost secrets.
<c- p>&lt;/</c-><c- f>header</c-><c- p>&gt;</c-></code></pre>

   <p>Here is another way of marking this up, this time showing the paragraphs explicitly, and
   splitting the one link element into three:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>header</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Welcome! <c- p>&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;about.html&quot;</c-><c- p>&gt;</c->This is home of...<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>h1</c-><c- p>&gt;&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;about.html&quot;</c-><c- p>&gt;</c->The Falcons!<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;&lt;/</c-><c- f>h1</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;about.html&quot;</c-><c- p>&gt;</c->The Lockheed Martin multirole jet
 fighter aircraft!<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c-> This page discusses the F-16 Fighting
 Falcon&apos;s innermost secrets.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>header</c-><c- p>&gt;</c-></code></pre>

  </div>

  <div class=example>

   

   <p>It is possible for paragraphs to overlap when using certain elements that define fallback
   content. For example, in the following section:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>section</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>h2</c-><c- p>&gt;</c->My Cats<c- p>&lt;/</c-><c- f>h2</c-><c- p>&gt;</c->
 You can play with my cat simulator.
 <c- p>&lt;</c-><c- f>object</c-> <c- e>data</c-><c- o>=</c-><c- s>&quot;cats.sim&quot;</c-><c- p>&gt;</c->
  To see the cat simulator, use one of the following links:
  <c- p>&lt;</c-><c- f>ul</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;cats.sim&quot;</c-><c- p>&gt;</c->Download simulator file<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;https://sims.example.com/watch?v=LYds5xY4INU&quot;</c-><c- p>&gt;</c->Use online simulator<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c->
  <c- p>&lt;/</c-><c- f>ul</c-><c- p>&gt;</c->
  Alternatively, upgrade to the Mellblom Browser.
 <c- p>&lt;/</c-><c- f>object</c-><c- p>&gt;</c->
 I&apos;m quite proud of it.
<c- p>&lt;/</c-><c- f>section</c-><c- p>&gt;</c-></code></pre>

   <p>There are five paragraphs:</p>

   <ol class=brief><li>The paragraph that says "You can play with my cat simulator. <i>object</i> I'm
    quite proud of it.", where <i>object</i> is the <code id=paragraphs:the-object-element><a href=iframe-embed-object.html#the-object-element>object</a></code> element.<li>The paragraph that says "To see the cat simulator, use one of the following links:".<li>The paragraph that says "Download simulator file".<li>The paragraph that says "Use online simulator".<li>The paragraph that says "Alternatively, upgrade to the Mellblom Browser.".</ol>

   <p>The first paragraph is overlapped by the other four. A user agent that supports the "cats.sim"
   resource will only show the first one, but a user agent that shows the fallback will confusingly
   show the first sentence of the first paragraph as if it was in the same paragraph as the second
   one, and will show the last paragraph as if it was at the start of the second sentence of the
   first paragraph.</p>

   <p>To avoid this confusion, explicit <code id=paragraphs:the-p-element-5><a href=grouping-content.html#the-p-element>p</a></code> elements can be used. For example:</p>

   
   <pre><code class='html'><c- p>&lt;</c-><c- f>section</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>h2</c-><c- p>&gt;</c->My Cats<c- p>&lt;/</c-><c- f>h2</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->You can play with my cat simulator.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>object</c-> <c- e>data</c-><c- o>=</c-><c- s>&quot;cats.sim&quot;</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->To see the cat simulator, use one of the following links:<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>ul</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;cats.sim&quot;</c-><c- p>&gt;</c->Download simulator file<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;https://sims.example.com/watch?v=LYds5xY4INU&quot;</c-><c- p>&gt;</c->Use online simulator<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c->
  <c- p>&lt;/</c-><c- f>ul</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Alternatively, upgrade to the Mellblom Browser.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>object</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->I&apos;m quite proud of it.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>section</c-><c- p>&gt;</c-></code></pre>

  </div>


  <h4 id=global-attributes><span class=secno>3.2.5</span> <dfn>Global attributes</dfn><a href=#global-attributes class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes title="Global attributes are attributes common to all HTML elements; they can be used on all elements, though they may have no effect on some elements.">Global_attributes</a></div></div>

  <p>The following attributes are common to and may be specified on all <a id=global-attributes:html-elements href=infrastructure.html#html-elements>HTML
  elements</a>:</p>

  <ul class=brief><li><code id=global-attributes:the-accesskey-attribute><a href=interaction.html#the-accesskey-attribute>accesskey</a></code><li><code id=global-attributes:attr-autocapitalize><a href=interaction.html#attr-autocapitalize>autocapitalize</a></code><li><code id=global-attributes:attr-autocorrect><a href=interaction.html#attr-autocorrect>autocorrect</a></code><li><code id=global-attributes:attr-fe-autofocus><a href=interaction.html#attr-fe-autofocus>autofocus</a></code><li><code id=global-attributes:attr-contenteditable><a href=interaction.html#attr-contenteditable>contenteditable</a></code><li><code id=global-attributes:attr-dir><a href=#attr-dir>dir</a></code><li><code id=global-attributes:attr-draggable><a href=dnd.html#attr-draggable>draggable</a></code><li><code id=global-attributes:attr-enterkeyhint><a href=interaction.html#attr-enterkeyhint>enterkeyhint</a></code><li><code id=global-attributes:attr-hidden><a href=interaction.html#attr-hidden>hidden</a></code><li><code id=global-attributes:the-inert-attribute><a href=interaction.html#the-inert-attribute>inert</a></code><li><code id=global-attributes:attr-inputmode><a href=interaction.html#attr-inputmode>inputmode</a></code><li><code id=global-attributes:attr-is><a href=custom-elements.html#attr-is>is</a></code><li><code id=global-attributes:attr-itemid><a href=microdata.html#attr-itemid>itemid</a></code><li><code id=global-attributes:names:-the-itemprop-attribute><a href=microdata.html#names:-the-itemprop-attribute>itemprop</a></code><li><code id=global-attributes:attr-itemref><a href=microdata.html#attr-itemref>itemref</a></code><li><code id=global-attributes:attr-itemscope><a href=microdata.html#attr-itemscope>itemscope</a></code><li><code id=global-attributes:attr-itemtype><a href=microdata.html#attr-itemtype>itemtype</a></code><li><code id=global-attributes:attr-lang><a href=#attr-lang>lang</a></code><li><code id=global-attributes:attr-nonce><a href=urls-and-fetching.html#attr-nonce>nonce</a></code><li><code id=global-attributes:attr-popover><a href=popover.html#attr-popover>popover</a></code><li><code id=global-attributes:attr-spellcheck><a href=interaction.html#attr-spellcheck>spellcheck</a></code><li><code id=global-attributes:attr-style><a href=#attr-style>style</a></code><li><code id=global-attributes:attr-tabindex><a href=interaction.html#attr-tabindex>tabindex</a></code><li><code id=global-attributes:attr-title><a href=#attr-title>title</a></code><li><code id=global-attributes:attr-translate><a href=#attr-translate>translate</a></code><li><code id=global-attributes:attr-writingsuggestions><a href=interaction.html#attr-writingsuggestions>writingsuggestions</a></code></ul>

  

  <hr>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/slot title="The slot global attribute assigns a slot in a shadow DOM shadow tree to an element: An element with a slot attribute is assigned to the slot created by the <slot> element whose name attribute's value matches that slot attribute's value.">Global_attributes/slot</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>63+</span></span><span class="safari yes"><span>Safari</span><span>10+</span></span><span class="chrome yes"><span>Chrome</span><span>53+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge no"><span>Edge (Legacy)</span><span>No</span></span><span class="ie unknown"><span>Internet Explorer</span><span>?</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><p><cite>DOM</cite> defines the user agent requirements for the <dfn data-dfn-type=element-attr data-dfn-for=global id=classes><code>class</code></dfn>, <dfn data-dfn-type=element-attr data-dfn-for=global id=the-id-attribute><code>id</code></dfn>, and <dfn data-dfn-for=global id=attr-slot data-dfn-type=element-attr><code>slot</code></dfn> attributes for any element in any namespace.
  <a href=references.html#refsDOM>[DOM]</a></p>

  <p>The <code id=global-attributes:classes><a href=#classes>class</a></code>, <code id=global-attributes:the-id-attribute><a href=#the-id-attribute>id</a></code>, and <code id=global-attributes:attr-slot><a href=#attr-slot>slot</a></code> attributes may be specified on all <a id=global-attributes:html-elements-2 href=infrastructure.html#html-elements>HTML elements</a>.</p>

  <p>When specified on <a id=global-attributes:html-elements-3 href=infrastructure.html#html-elements>HTML elements</a>, the <code id=global-attributes:classes-2><a href=#classes>class</a></code>
  attribute must have a value that is a <a id=global-attributes:set-of-space-separated-tokens href=common-microsyntaxes.html#set-of-space-separated-tokens>set of space-separated tokens</a> representing the
  various classes that the element belongs to.</p>

  <div class=note>

  <p>Assigning classes to an element affects class matching in selectors in CSS, the <code id=global-attributes:dom-document-getelementsbyclassname><a data-x-internal=dom-document-getelementsbyclassname href=https://dom.spec.whatwg.org/#dom-document-getelementsbyclassname>getElementsByClassName()</a></code> method in the DOM,
  and other such features.</p>

  <p>There are no additional restrictions on the tokens authors can use in the <code id=global-attributes:classes-3><a href=#classes>class</a></code> attribute, but authors are encouraged to use values that describe
  the nature of the content, rather than values that describe the desired presentation of the
  content.</p>

  </div>

  <p>When specified on <a id=global-attributes:html-elements-4 href=infrastructure.html#html-elements>HTML elements</a>, the <code id=global-attributes:the-id-attribute-2><a href=#the-id-attribute>id</a></code> attribute
  value must be unique amongst all the <a href=https://dom.spec.whatwg.org/#concept-id id=global-attributes:concept-id data-x-internal=concept-id>IDs</a> in the element's
  <a id=global-attributes:tree href=https://dom.spec.whatwg.org/#concept-tree data-x-internal=tree>tree</a> and must contain at least one character. The value must not contain any
  <a id=global-attributes:space-characters href=https://infra.spec.whatwg.org/#ascii-whitespace data-x-internal=space-characters>ASCII whitespace</a>.</p>

  

  <div class=note>

  <p>The <code id=global-attributes:the-id-attribute-3><a href=#the-id-attribute>id</a></code> attribute specifies its element's <a href=https://dom.spec.whatwg.org/#concept-id id=global-attributes:concept-id-2 data-x-internal=concept-id>unique identifier (ID)</a>.</p>

  <p>There are no other restrictions on what form an ID can take; in particular, IDs can consist of
  just digits, start with a digit, start with an underscore, consist of just punctuation, etc.</p>

  <p>An element's <a href=https://dom.spec.whatwg.org/#concept-id id=global-attributes:concept-id-3 data-x-internal=concept-id>unique identifier</a> can be used for a variety of
  purposes, most notably as a way to link to specific parts of a document using <a href=https://url.spec.whatwg.org/#concept-url-fragment id=global-attributes:concept-url-fragment data-x-internal=concept-url-fragment>fragments</a>, as a way to target an element when scripting, and
  as a way to style a specific element from CSS.</p>

  </div>

  

  <p>There are no conformance requirements for the <code id=global-attributes:attr-slot-2><a href=#attr-slot>slot</a></code> attribute
  specific to <a id=global-attributes:html-elements-5 href=infrastructure.html#html-elements>HTML elements</a>.</p>

  <p class=note>The <code id=global-attributes:attr-slot-3><a href=#attr-slot>slot</a></code> attribute is used to <a id=global-attributes:assign-a-slot href=https://dom.spec.whatwg.org/#assign-a-slot data-x-internal=assign-a-slot>assign a
  slot</a> to an element: an element with a <code id=global-attributes:attr-slot-4><a href=#attr-slot>slot</a></code> attribute is
  <a href=https://dom.spec.whatwg.org/#assign-a-slot id=global-attributes:assign-a-slot-2 data-x-internal=assign-a-slot>assigned</a> to the <a href=https://dom.spec.whatwg.org/#concept-slot id=global-attributes:concept-slot data-x-internal=concept-slot>slot</a>
  created by the <code id=global-attributes:the-slot-element><a href=scripting.html#the-slot-element>slot</a></code> element whose <a href=scripting.html#attr-slot-name id=global-attributes:attr-slot-name>name</a>
  attribute's value matches that <code id=global-attributes:attr-slot-5><a href=#attr-slot>slot</a></code> attribute's value — but only
  if that <code id=global-attributes:the-slot-element-2><a href=scripting.html#the-slot-element>slot</a></code> element finds itself in the <a id=global-attributes:shadow-tree href=https://dom.spec.whatwg.org/#concept-shadow-tree data-x-internal=shadow-tree>shadow tree</a> whose
  <a id=global-attributes:root href=https://dom.spec.whatwg.org/#concept-tree-root data-x-internal=root>root</a>'s <a href=https://dom.spec.whatwg.org/#concept-documentfragment-host id=global-attributes:concept-documentfragment-host data-x-internal=concept-documentfragment-host>host</a> has the corresponding
  <code id=global-attributes:attr-slot-6><a href=#attr-slot>slot</a></code> attribute value.</p>

  <hr>

  <p>To enable assistive technology products to expose a more fine-grained interface than is
  otherwise possible with HTML elements and attributes, a set of <a href=#wai-aria>annotations
  for assistive technology products</a> can be specified (the ARIA <code id=global-attributes:attr-aria-role><a href=infrastructure.html#attr-aria-role>role</a></code> and <code id=global-attributes:attr-aria-*><a href=infrastructure.html#attr-aria-*>aria-*</a></code> attributes).
  <a href=references.html#refsARIA>[ARIA]</a></p>

  <hr>

  <p>The following <a id=global-attributes:event-handler-content-attributes href=webappapis.html#event-handler-content-attributes>event handler content attributes</a> may be specified on any <a href=infrastructure.html#html-elements id=global-attributes:html-elements-6>HTML element</a>:</p>

  <ul class=brief><li><code id=global-attributes:handler-onauxclick><a href=webappapis.html#handler-onauxclick>onauxclick</a></code><li><code id=global-attributes:handler-onbeforeinput><a href=webappapis.html#handler-onbeforeinput>onbeforeinput</a></code><li><code id=global-attributes:handler-onbeforematch><a href=webappapis.html#handler-onbeforematch>onbeforematch</a></code><li><code id=global-attributes:handler-onbeforetoggle><a href=webappapis.html#handler-onbeforetoggle>onbeforetoggle</a></code><li><code id=global-attributes:handler-onblur><a href=webappapis.html#handler-onblur>onblur</a></code>*<li><code id=global-attributes:handler-oncancel><a href=webappapis.html#handler-oncancel>oncancel</a></code><li><code id=global-attributes:handler-oncanplay><a href=webappapis.html#handler-oncanplay>oncanplay</a></code><li><code id=global-attributes:handler-oncanplaythrough><a href=webappapis.html#handler-oncanplaythrough>oncanplaythrough</a></code><li><code id=global-attributes:handler-onchange><a href=webappapis.html#handler-onchange>onchange</a></code><li><code id=global-attributes:handler-onclick><a href=webappapis.html#handler-onclick>onclick</a></code><li><code id=global-attributes:handler-onclose><a href=webappapis.html#handler-onclose>onclose</a></code><li><code id=global-attributes:handler-oncommand><a href=webappapis.html#handler-oncommand>oncommand</a></code><li><code id=global-attributes:handler-oncontextlost><a href=webappapis.html#handler-oncontextlost>oncontextlost</a></code><li><code id=global-attributes:handler-oncontextmenu><a href=webappapis.html#handler-oncontextmenu>oncontextmenu</a></code><li><code id=global-attributes:handler-oncontextrestored><a href=webappapis.html#handler-oncontextrestored>oncontextrestored</a></code><li><code id=global-attributes:handler-oncopy><a href=webappapis.html#handler-oncopy>oncopy</a></code><li><code id=global-attributes:handler-oncuechange><a href=webappapis.html#handler-oncuechange>oncuechange</a></code><li><code id=global-attributes:handler-oncut><a href=webappapis.html#handler-oncut>oncut</a></code><li><code id=global-attributes:handler-ondblclick><a href=webappapis.html#handler-ondblclick>ondblclick</a></code><li><code id=global-attributes:handler-ondrag><a href=webappapis.html#handler-ondrag>ondrag</a></code><li><code id=global-attributes:handler-ondragend><a href=webappapis.html#handler-ondragend>ondragend</a></code><li><code id=global-attributes:handler-ondragenter><a href=webappapis.html#handler-ondragenter>ondragenter</a></code><li><code id=global-attributes:handler-ondragleave><a href=webappapis.html#handler-ondragleave>ondragleave</a></code><li><code id=global-attributes:handler-ondragover><a href=webappapis.html#handler-ondragover>ondragover</a></code><li><code id=global-attributes:handler-ondragstart><a href=webappapis.html#handler-ondragstart>ondragstart</a></code><li><code id=global-attributes:handler-ondrop><a href=webappapis.html#handler-ondrop>ondrop</a></code><li><code id=global-attributes:handler-ondurationchange><a href=webappapis.html#handler-ondurationchange>ondurationchange</a></code><li><code id=global-attributes:handler-onemptied><a href=webappapis.html#handler-onemptied>onemptied</a></code><li><code id=global-attributes:handler-onended><a href=webappapis.html#handler-onended>onended</a></code><li><code id=global-attributes:handler-onerror><a href=webappapis.html#handler-onerror>onerror</a></code>*<li><code id=global-attributes:handler-onfocus><a href=webappapis.html#handler-onfocus>onfocus</a></code>*<li><code id=global-attributes:handler-onformdata><a href=webappapis.html#handler-onformdata>onformdata</a></code><li><code id=global-attributes:handler-oninput><a href=webappapis.html#handler-oninput>oninput</a></code><li><code id=global-attributes:handler-oninvalid><a href=webappapis.html#handler-oninvalid>oninvalid</a></code><li><code id=global-attributes:handler-onkeydown><a href=webappapis.html#handler-onkeydown>onkeydown</a></code><li><code id=global-attributes:handler-onkeypress><a href=webappapis.html#handler-onkeypress>onkeypress</a></code><li><code id=global-attributes:handler-onkeyup><a href=webappapis.html#handler-onkeyup>onkeyup</a></code><li><code id=global-attributes:handler-onload><a href=webappapis.html#handler-onload>onload</a></code>*<li><code id=global-attributes:handler-onloadeddata><a href=webappapis.html#handler-onloadeddata>onloadeddata</a></code><li><code id=global-attributes:handler-onloadedmetadata><a href=webappapis.html#handler-onloadedmetadata>onloadedmetadata</a></code><li><code id=global-attributes:handler-onloadstart><a href=webappapis.html#handler-onloadstart>onloadstart</a></code><li><code id=global-attributes:handler-onmousedown><a href=webappapis.html#handler-onmousedown>onmousedown</a></code><li><code id=global-attributes:handler-onmouseenter><a href=webappapis.html#handler-onmouseenter>onmouseenter</a></code><li><code id=global-attributes:handler-onmouseleave><a href=webappapis.html#handler-onmouseleave>onmouseleave</a></code><li><code id=global-attributes:handler-onmousemove><a href=webappapis.html#handler-onmousemove>onmousemove</a></code><li><code id=global-attributes:handler-onmouseout><a href=webappapis.html#handler-onmouseout>onmouseout</a></code><li><code id=global-attributes:handler-onmouseover><a href=webappapis.html#handler-onmouseover>onmouseover</a></code><li><code id=global-attributes:handler-onmouseup><a href=webappapis.html#handler-onmouseup>onmouseup</a></code><li><code id=global-attributes:handler-onpaste><a href=webappapis.html#handler-onpaste>onpaste</a></code><li><code id=global-attributes:handler-onpause><a href=webappapis.html#handler-onpause>onpause</a></code><li><code id=global-attributes:handler-onplay><a href=webappapis.html#handler-onplay>onplay</a></code><li><code id=global-attributes:handler-onplaying><a href=webappapis.html#handler-onplaying>onplaying</a></code><li><code id=global-attributes:handler-onprogress><a href=webappapis.html#handler-onprogress>onprogress</a></code><li><code id=global-attributes:handler-onratechange><a href=webappapis.html#handler-onratechange>onratechange</a></code><li><code id=global-attributes:handler-onreset><a href=webappapis.html#handler-onreset>onreset</a></code><li><code id=global-attributes:handler-onresize><a href=webappapis.html#handler-onresize>onresize</a></code>*<li><code id=global-attributes:handler-onscroll><a href=webappapis.html#handler-onscroll>onscroll</a></code>*<li><code id=global-attributes:handler-onscrollend><a href=webappapis.html#handler-onscrollend>onscrollend</a></code>*<li><code id=global-attributes:handler-onsecuritypolicyviolation><a href=webappapis.html#handler-onsecuritypolicyviolation>onsecuritypolicyviolation</a></code><li><code id=global-attributes:handler-onseeked><a href=webappapis.html#handler-onseeked>onseeked</a></code><li><code id=global-attributes:handler-onseeking><a href=webappapis.html#handler-onseeking>onseeking</a></code><li><code id=global-attributes:handler-onselect><a href=webappapis.html#handler-onselect>onselect</a></code><li><code id=global-attributes:handler-onslotchange><a href=webappapis.html#handler-onslotchange>onslotchange</a></code><li><code id=global-attributes:handler-onstalled><a href=webappapis.html#handler-onstalled>onstalled</a></code><li><code id=global-attributes:handler-onsubmit><a href=webappapis.html#handler-onsubmit>onsubmit</a></code><li><code id=global-attributes:handler-onsuspend><a href=webappapis.html#handler-onsuspend>onsuspend</a></code><li><code id=global-attributes:handler-ontimeupdate><a href=webappapis.html#handler-ontimeupdate>ontimeupdate</a></code><li><code id=global-attributes:handler-ontoggle><a href=webappapis.html#handler-ontoggle>ontoggle</a></code><li><code id=global-attributes:handler-onvolumechange><a href=webappapis.html#handler-onvolumechange>onvolumechange</a></code><li><code id=global-attributes:handler-onwaiting><a href=webappapis.html#handler-onwaiting>onwaiting</a></code><li><code id=global-attributes:handler-onwheel><a href=webappapis.html#handler-onwheel>onwheel</a></code></ul>

  <p class=note>The attributes marked with an asterisk have a different meaning when specified on
  <code id=global-attributes:the-body-element><a href=sections.html#the-body-element>body</a></code> elements as those elements expose <a id=global-attributes:event-handlers href=webappapis.html#event-handlers>event handlers</a> of the
  <code>Window</code> object with the same names.</p>

  <p class=note>While these attributes apply to all elements, they are not useful on all elements.
  For example, only <a href=media.html#media-element id=global-attributes:media-element>media elements</a> will ever receive a <code id=global-attributes:event-media-volumechange><a href=media.html#event-media-volumechange>volumechange</a></code> event fired by the user agent.</p>

  <hr>

  <p><a href=#custom-data-attribute id=global-attributes:custom-data-attribute>Custom data attributes</a> (e.g. <code>data-foldername</code> or <code>data-msgid</code>) can be specified on any
  <a href=infrastructure.html#html-elements id=global-attributes:html-elements-7>HTML element</a>, to store custom data, state, annotations, and
  similar, specific to the page.</p>

  <hr>

  <p>In <a id=global-attributes:html-documents href=https://dom.spec.whatwg.org/#html-document data-x-internal=html-documents>HTML documents</a>, elements in the <a id=global-attributes:html-namespace-2 href=https://infra.spec.whatwg.org/#html-namespace data-x-internal=html-namespace-2>HTML namespace</a> may have an <code>xmlns</code> attribute specified, if, and only if, it has the exact value "<code>http://www.w3.org/1999/xhtml</code>". This does not apply to <a id=global-attributes:xml-documents href=https://dom.spec.whatwg.org/#xml-document data-x-internal=xml-documents>XML
  documents</a>.</p>

  <p class=note>In HTML, the <code>xmlns</code> attribute has absolutely no effect. It
  is basically a talisman. It is allowed merely to make migration to and from XML mildly easier.
  When parsed by an <span>HTML parser</span>, the attribute ends up in no namespace, not the "<code>http://www.w3.org/2000/xmlns/</code>" namespace like namespace declaration attributes in
  XML do.</p>

  <p class=note>In XML, an <code>xmlns</code> attribute is part of the namespace
  declaration mechanism, and an element cannot actually have an <code>xmlns</code>
  attribute in no namespace specified.</p>

  <hr>

  <p><cite>XML</cite> also allows the use of the <code id=global-attributes:attr-xml-space><a data-x-internal=attr-xml-space href=https://www.w3.org/TR/xml/#sec-white-space>xml:space</a></code>
  attribute in the <a id=global-attributes:xml-namespace href=https://infra.spec.whatwg.org/#xml-namespace data-x-internal=xml-namespace>XML namespace</a> on any element in an <a href=https://dom.spec.whatwg.org/#xml-document id=global-attributes:xml-documents-2 data-x-internal=xml-documents>XML
  document</a>. This attribute has no effect on <a id=global-attributes:html-elements-8 href=infrastructure.html#html-elements>HTML elements</a>, as the default
  behavior in HTML is to preserve whitespace. <a href=references.html#refsXML>[XML]</a></p>

  <p class=note>There is no way to serialize the <code id=global-attributes:attr-xml-space-2><a data-x-internal=attr-xml-space href=https://www.w3.org/TR/xml/#sec-white-space>xml:space</a></code>
  attribute on <a id=global-attributes:html-elements-9 href=infrastructure.html#html-elements>HTML elements</a> in the <code>text/html</code> syntax.</p>



  <h5 id=the-title-attribute><span class=secno>3.2.5.1</span> The <code id=the-title-attribute:attr-title><a href=#attr-title>title</a></code> attribute<a href=#the-title-attribute class=self-link></a></h5><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title title="The title global attribute contains text representing advisory information related to the element it belongs to.">Global_attributes/title</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <p>The <dfn data-dfn-for=html-global id=attr-title data-dfn-type=element-attr><code>title</code></dfn> attribute
  <a href=#represents id=the-title-attribute:represents>represents</a> advisory information for the element, such as would be appropriate for a
  tooltip. On a link, this could be the title or a description of the target resource; on an image,
  it could be the image credit or a description of the image; on a paragraph, it could be a footnote
  or commentary on the text; on a citation, it could be further information about the source; on
  <a href=#interactive-content-2 id=the-title-attribute:interactive-content-2>interactive content</a>, it could be a label for, or instructions for, use of the
  element; and so forth.  The value is text.</p>

  
  <p class=note>Relying on the <code id=the-title-attribute:attr-title-2><a href=#attr-title>title</a></code> attribute is currently
  discouraged as many user agents do not expose the attribute in an accessible manner as required by
  this specification (e.g., requiring a pointing device such as a mouse to cause a tooltip to
  appear, which excludes keyboard-only users and touch-only users, such as anyone with a modern
  phone or tablet).</p>

  <p>If this attribute is omitted from an element, then it implies that the <code id=the-title-attribute:attr-title-3><a href=#attr-title>title</a></code> attribute of the nearest ancestor <a href=infrastructure.html#html-elements id=the-title-attribute:html-elements>HTML element</a> with a <code id=the-title-attribute:attr-title-4><a href=#attr-title>title</a></code> attribute set is also
  relevant to this element. Setting the attribute overrides this, explicitly stating that the
  advisory information of any ancestors is not relevant to this element. Setting the attribute to
  the empty string indicates that the element has no advisory information.</p>

  <p>If the <code id=the-title-attribute:attr-title-5><a href=#attr-title>title</a></code> attribute's value contains U+000A LINE FEED (LF)
  characters, the content is split into multiple lines. Each U+000A LINE FEED (LF) character
  represents a line break.</p>

  <div class=example>
   <p>Caution is advised with respect to the use of newlines in <code id=the-title-attribute:attr-title-6><a href=#attr-title>title</a></code> attributes.</p>

   <p>For instance, the following snippet actually defines an abbreviation's expansion <em>with a
   line break in it</em>:</p>

   <pre class=bad><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->My logs show that there was some interest in <c- p>&lt;</c-><c- f>abbr</c-> <c- e>title</c-><c- o>=</c-><c- s>&quot;Hypertext</c->
<c- s>Transport Protocol&quot;</c-><c- p>&gt;</c->HTTP<c- p>&lt;/</c-><c- f>abbr</c-><c- p>&gt;</c-> today.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre> 
  </div>

  <p>Some elements, such as <code id=the-title-attribute:the-link-element><a href=semantics.html#the-link-element>link</a></code>, <code id=the-title-attribute:the-abbr-element><a href=text-level-semantics.html#the-abbr-element>abbr</a></code>, and <code id=the-title-attribute:the-input-element><a href=input.html#the-input-element>input</a></code>, define
  additional semantics for the <code id=the-title-attribute:attr-title-7><a href=#attr-title>title</a></code> attribute beyond the semantics
  described above.</p> 

  



  <h5 id=the-lang-and-xml:lang-attributes><span class=secno>3.2.5.2</span> The <code id=the-lang-and-xml:lang-attributes:attr-lang><a href=#attr-lang>lang</a></code> and <code id=the-lang-and-xml:lang-attributes:attr-xml-lang><a data-x-internal=attr-xml-lang href=https://www.w3.org/TR/xml/#sec-lang-tag>xml:lang</a></code>
  attributes<a href=#the-lang-and-xml:lang-attributes class=self-link></a></h5>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang title="The lang global attribute helps define the language of an element: the language that non-editable elements are written in, or the language that the editable elements should be written in by the user. The attribute contains a single &quot;language tag&quot; in the format defined in RFC 5646: Tags for Identifying Languages (also known as BCP 47).">Global_attributes/lang</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><p>The <dfn data-dfn-for=html-global id=attr-lang data-dfn-type=element-attr><code>lang</code></dfn> attribute
  (in no namespace) specifies the primary language for the element's contents and for any of the
  element's attributes that contain text. Its value must be a valid BCP 47 language tag, or the
  empty string. Setting the attribute to the empty string indicates that the primary language is
  unknown. <a href=references.html#refsBCP47>[BCP47]</a></p>

  <p>The <dfn id=attr-xml-lang><a href=https://www.w3.org/TR/xml/#sec-lang-tag><code>lang</code></a></dfn> attribute in the <a id=the-lang-and-xml:lang-attributes:xml-namespace href=https://infra.spec.whatwg.org/#xml-namespace data-x-internal=xml-namespace>XML namespace</a> is defined in XML.
  <a href=references.html#refsXML>[XML]</a></p>

  <p>If these attributes are omitted from an element, then the language of this element is the same
  as the language of its parent element, if any (except for <code id=the-lang-and-xml:lang-attributes:the-slot-element><a href=scripting.html#the-slot-element>slot</a></code> elements in a
  <a id=the-lang-and-xml:lang-attributes:shadow-tree href=https://dom.spec.whatwg.org/#concept-shadow-tree data-x-internal=shadow-tree>shadow tree</a>).</p>

  <p>The <code id=the-lang-and-xml:lang-attributes:attr-lang-2><a href=#attr-lang>lang</a></code> attribute in no namespace may be used on any <a href=infrastructure.html#html-elements id=the-lang-and-xml:lang-attributes:html-elements>HTML element</a>.</p>

  <p>The <a href=https://www.w3.org/TR/xml/#sec-lang-tag id=the-lang-and-xml:lang-attributes:attr-xml-lang-2 data-x-internal=attr-xml-lang><code>lang</code> attribute in the <span>XML
  namespace</span></a> may be used on <a id=the-lang-and-xml:lang-attributes:html-elements-2 href=infrastructure.html#html-elements>HTML elements</a> in <a id=the-lang-and-xml:lang-attributes:xml-documents href=https://dom.spec.whatwg.org/#xml-document data-x-internal=xml-documents>XML documents</a>,
  as well as elements in other namespaces if the relevant specifications allow it (in particular,
  MathML and SVG allow <a href=https://www.w3.org/TR/xml/#sec-lang-tag id=the-lang-and-xml:lang-attributes:attr-xml-lang-3 data-x-internal=attr-xml-lang><code>lang</code> attributes in the
  <span>XML namespace</span></a> to be specified on their elements). If both the <code id=the-lang-and-xml:lang-attributes:attr-lang-3><a href=#attr-lang>lang</a></code> attribute in no namespace and the <a href=https://www.w3.org/TR/xml/#sec-lang-tag id=the-lang-and-xml:lang-attributes:attr-xml-lang-4 data-x-internal=attr-xml-lang><code>lang</code> attribute in the <span>XML namespace</span></a> are specified on the same
  element, they must have exactly the same value when compared in an <a id=the-lang-and-xml:lang-attributes:ascii-case-insensitive href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII
  case-insensitive</a> manner.</p>

  <p>Authors must not use the <a href=https://www.w3.org/TR/xml/#sec-lang-tag id=the-lang-and-xml:lang-attributes:attr-xml-lang-5 data-x-internal=attr-xml-lang><code>lang</code> attribute in
  the <span>XML namespace</span></a> on <a id=the-lang-and-xml:lang-attributes:html-elements-3 href=infrastructure.html#html-elements>HTML elements</a> in <a id=the-lang-and-xml:lang-attributes:html-documents href=https://dom.spec.whatwg.org/#html-document data-x-internal=html-documents>HTML
  documents</a>. To ease migration to and from XML, authors may specify an attribute in no
  namespace with no prefix and with the literal localname "<code>xml:lang</code>" on
  <a id=the-lang-and-xml:lang-attributes:html-elements-4 href=infrastructure.html#html-elements>HTML elements</a> in <a id=the-lang-and-xml:lang-attributes:html-documents-2 href=https://dom.spec.whatwg.org/#html-document data-x-internal=html-documents>HTML documents</a>, but such attributes must only be
  specified if a <code id=the-lang-and-xml:lang-attributes:attr-lang-4><a href=#attr-lang>lang</a></code> attribute in no namespace is also specified,
  and both attributes must have the same value when compared in an <a id=the-lang-and-xml:lang-attributes:ascii-case-insensitive-2 href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII
  case-insensitive</a> manner.</p>

  <p class=note>The attribute in no namespace with no prefix and with the literal localname "<code>xml:lang</code>" has no effect on language processing.</p>

  



  <h5 id=the-translate-attribute><span class=secno>3.2.5.3</span> The <code id=the-translate-attribute:attr-translate><a href=#attr-translate>translate</a></code> attribute<a href=#the-translate-attribute class=self-link></a></h5>

  

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/translate title="The translate global attribute is an enumerated attribute that is used to specify whether an element's translatable attribute values and its Text node children should be translated when the page is localized, or whether to leave them unchanged.">Global_attributes/translate</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>111+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>19+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><p>The <dfn data-dfn-for=html-global id=attr-translate data-dfn-type=element-attr><code>translate</code></dfn>
  attribute is used to specify whether an element's attribute values and the values of its
  <code id=the-translate-attribute:text><a data-x-internal=text href=https://dom.spec.whatwg.org/#interface-text>Text</a></code> node children are to be translated when the page is localized, or whether to
  leave them unchanged. It is an <a id=the-translate-attribute:enumerated-attribute href=common-microsyntaxes.html#enumerated-attribute>enumerated attribute</a> with the
  following keywords and states:</p>

  <table><thead><tr><th>Keyword
     <th>State
     <th>Brief description
   <tbody><tr><td><dfn data-dfn-for=html-global/translate id=attr-translate-yes-keyword data-dfn-type=attr-value><code>yes</code></dfn>
     <td rowspan=2><dfn id=attr-translate-yes-state>Yes</dfn>
     <td rowspan=2>Sets <a href=#translation-mode id=the-translate-attribute:translation-mode>translation mode</a> to <a href=#translate-enabled id=the-translate-attribute:translate-enabled>translate-enabled</a>.
    <tr><td>(the empty string)
    <tr><td><dfn data-dfn-for=html-global/translate id=attr-translate-no-keyword data-dfn-type=attr-value><code>no</code></dfn>
     <td><dfn id=attr-translate-no-state>No</dfn>
     <td>Sets <a href=#translation-mode id=the-translate-attribute:translation-mode-2>translation mode</a> to <a href=#no-translate id=the-translate-attribute:no-translate>no-translate</a>.
  </table>

  <p>The attribute's <i id=the-translate-attribute:missing-value-default><a href=common-microsyntaxes.html#missing-value-default>missing value default</a></i> and <i id=the-translate-attribute:invalid-value-default><a href=common-microsyntaxes.html#invalid-value-default>invalid value default</a></i> are both the <dfn id=attr-translate-inherit-state>Inherit</dfn> state.</p>

  <p>Each element (even non-HTML elements) has a <dfn id=translation-mode>translation mode</dfn>, which is in either the
  <a href=#translate-enabled id=the-translate-attribute:translate-enabled-2>translate-enabled</a> state or the <a href=#no-translate id=the-translate-attribute:no-translate-2>no-translate</a> state. If an <a href=infrastructure.html#html-elements id=the-translate-attribute:html-elements>HTML element</a>'s <code id=the-translate-attribute:attr-translate-2><a href=#attr-translate>translate</a></code>
  attribute is in the <a href=#attr-translate-yes-state id=the-translate-attribute:attr-translate-yes-state>Yes</a> state, then the element's
  <a href=#translation-mode id=the-translate-attribute:translation-mode-3>translation mode</a> is in the <a href=#translate-enabled id=the-translate-attribute:translate-enabled-3>translate-enabled</a> state; otherwise, if the
  element's <code id=the-translate-attribute:attr-translate-3><a href=#attr-translate>translate</a></code> attribute is in the <a href=#attr-translate-no-state id=the-translate-attribute:attr-translate-no-state>No</a> state, then the element's <a href=#translation-mode id=the-translate-attribute:translation-mode-4>translation mode</a>
  is in the <a href=#no-translate id=the-translate-attribute:no-translate-3>no-translate</a> state. Otherwise, either the element's <code id=the-translate-attribute:attr-translate-4><a href=#attr-translate>translate</a></code> attribute is in the <a href=#attr-translate-inherit-state id=the-translate-attribute:attr-translate-inherit-state>Inherit</a> state, or the element is not an <a href=infrastructure.html#html-elements id=the-translate-attribute:html-elements-2>HTML element</a> and thus does not have a <code id=the-translate-attribute:attr-translate-5><a href=#attr-translate>translate</a></code> attribute; in either case, the element's
  <a href=#translation-mode id=the-translate-attribute:translation-mode-5>translation mode</a> is in the same state as its <a id=the-translate-attribute:parent-element href=https://dom.spec.whatwg.org/#parent-element data-x-internal=parent-element>parent element</a>'s, if any,
  or in the <a href=#translate-enabled id=the-translate-attribute:translate-enabled-4>translate-enabled</a> state, if the element's <a id=the-translate-attribute:parent-element-2 href=https://dom.spec.whatwg.org/#parent-element data-x-internal=parent-element>parent element</a> is
  null.</p>

  <p>When an element is in the <dfn id=translate-enabled>translate-enabled</dfn> state, the element's <a href=#translatable-attributes id=the-translate-attribute:translatable-attributes>translatable
  attributes</a> and the values of its <code id=the-translate-attribute:text-2><a data-x-internal=text href=https://dom.spec.whatwg.org/#interface-text>Text</a></code> node children are to be translated when
  the page is localized.</p>

  <p>When an element is in the <dfn id=no-translate>no-translate</dfn> state, the element's attribute values and the
  values of its <code id=the-translate-attribute:text-3><a data-x-internal=text href=https://dom.spec.whatwg.org/#interface-text>Text</a></code> node children are to be left as-is when the page is localized,
  e.g. because the element contains a person's name or a name of a computer program.</p>

  <p>The following attributes are <dfn id=translatable-attributes>translatable attributes</dfn>:</p>

  <ul class=brief><li><code id=the-translate-attribute:attr-th-abbr><a href=tables.html#attr-th-abbr>abbr</a></code> on <code id=the-translate-attribute:the-th-element><a href=tables.html#the-th-element>th</a></code> elements<li><code>alt</code> on <code id=the-translate-attribute:attr-area-alt><a href=image-maps.html#attr-area-alt>area</a></code>,
                                     <code id=the-translate-attribute:attr-img-alt><a href=embedded-content.html#attr-img-alt>img</a></code>, and
                                     <code id=the-translate-attribute:attr-input-alt><a href=input.html#attr-input-alt>input</a></code> elements<li><code id=the-translate-attribute:attr-meta-content><a href=semantics.html#attr-meta-content>content</a></code> on <code id=the-translate-attribute:the-meta-element><a href=semantics.html#the-meta-element>meta</a></code> elements, if the <code id=the-translate-attribute:attr-meta-name><a href=semantics.html#attr-meta-name>name</a></code> attribute specifies a metadata name whose value is known to be translatable<li><code id=the-translate-attribute:attr-hyperlink-download><a href=links.html#attr-hyperlink-download>download</a></code> on <code id=the-translate-attribute:the-a-element><a href=text-level-semantics.html#the-a-element>a</a></code> and
                                                                 <code id=the-translate-attribute:the-area-element><a href=image-maps.html#the-area-element>area</a></code> elements<li><code>label</code> on <code id=the-translate-attribute:attr-optgroup-label><a href=form-elements.html#attr-optgroup-label>optgroup</a></code>,
                                       <code id=the-translate-attribute:attr-option-label><a href=form-elements.html#attr-option-label>option</a></code>, and
                                       <code id=the-translate-attribute:attr-track-label><a href=media.html#attr-track-label>track</a></code> elements<li><code id=the-translate-attribute:attr-lang><a href=#attr-lang>lang</a></code> on <a id=the-translate-attribute:html-elements-3 href=infrastructure.html#html-elements>HTML elements</a>; must be "translated" to match the language used in the translation<li><code>placeholder</code> on <code id=the-translate-attribute:attr-input-placeholder><a href=input.html#attr-input-placeholder>input</a></code> and
                                             <code id=the-translate-attribute:attr-textarea-placeholder><a href=form-elements.html#attr-textarea-placeholder>textarea</a></code> elements<li><code id=the-translate-attribute:attr-iframe-srcdoc><a href=iframe-embed-object.html#attr-iframe-srcdoc>srcdoc</a></code> on <code id=the-translate-attribute:the-iframe-element><a href=iframe-embed-object.html#the-iframe-element>iframe</a></code> elements; must be parsed and recursively processed<li><code id=the-translate-attribute:attr-style><a href=#attr-style>style</a></code> on <a id=the-translate-attribute:html-elements-4 href=infrastructure.html#html-elements>HTML elements</a>; must be parsed and
   recursively processed (e.g. for the values of <a id="the-translate-attribute:'content'" href=https://drafts.csswg.org/css2/#content%E2%91%A0 data-x-internal="'content'">'content'</a> properties)<li><code id=the-translate-attribute:attr-title><a href=#attr-title>title</a></code> on all <a id=the-translate-attribute:html-elements-5 href=infrastructure.html#html-elements>HTML elements</a><li><code id=the-translate-attribute:attr-input-value><a href=input.html#attr-input-value>value</a></code> on <code id=the-translate-attribute:the-input-element><a href=input.html#the-input-element>input</a></code> elements with a
       <code id=the-translate-attribute:attr-input-type><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#button-state-(type=button)" id="the-translate-attribute:button-state-(type=button)">Button</a> state
       or the <a href="input.html#reset-button-state-(type=reset)" id="the-translate-attribute:reset-button-state-(type=reset)">Reset Button</a> state</ul>

  <p>Other specifications may define other attributes that are also <a href=#translatable-attributes id=the-translate-attribute:translatable-attributes-2>translatable
  attributes</a>. For example, <cite>ARIA</cite> would define the <code id=the-translate-attribute:attr-aria-label><a data-x-internal=attr-aria-label href=https://w3c.github.io/aria/#aria-label>aria-label</a></code> attribute as translatable.</p>

  

  <div class=example>

   <p>In this example, everything in the document is to be translated when the page is localized,
   except the sample keyboard input and sample program output:</p>

   <pre><code class='html'><c- cp>&lt;!DOCTYPE HTML&gt;</c->
<c- p>&lt;</c-><c- f>html</c-> <c- e>lang</c-><c- o>=</c-><c- s>en</c-><c- p>&gt;</c-> <c- c>&lt;!-- default on the document element is translate=yes --&gt;</c->
 <c- p>&lt;</c-><c- f>head</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>title</c-><c- p>&gt;</c->The Bee Game<c- p>&lt;/</c-><c- f>title</c-><c- p>&gt;</c-> <c- c>&lt;!-- implied translate=yes inherited from ancestors --&gt;</c->
 <c- p>&lt;/</c-><c- f>head</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>body</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->The Bee Game is a text adventure game in English.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->When the game launches, the first thing you should do is type
  <c- p>&lt;</c-><c- f>kbd</c-> <strong><c- e>translate</c-><c- o>=</c-><c- s>no</c-></strong><c- p>&gt;</c->eat honey<c- p>&lt;/</c-><c- f>kbd</c-><c- p>&gt;</c->. The game will respond with:<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>pre</c-><c- p>&gt;&lt;</c-><c- f>samp</c-> <strong><c- e>translate</c-><c- o>=</c-><c- s>no</c-></strong><c- p>&gt;</c->Yum yum! That was some good honey!<c- p>&lt;/</c-><c- f>samp</c-><c- p>&gt;&lt;/</c-><c- f>pre</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>body</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>html</c-><c- p>&gt;</c-></code></pre>

  </div>



  <h5 id=the-dir-attribute><span class=secno>3.2.5.4</span> The <code id=the-dir-attribute:attr-dir><a href=#attr-dir>dir</a></code> attribute<a href=#the-dir-attribute class=self-link></a></h5><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir title="The dir global attribute is an enumerated attribute that indicates the directionality of the element's text.">Global_attributes/dir</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <p>The <dfn data-dfn-for=html-global id=attr-dir data-dfn-type=element-attr><code>dir</code></dfn> attribute
  is an <a id=the-dir-attribute:enumerated-attribute href=common-microsyntaxes.html#enumerated-attribute>enumerated attribute</a> with the following keywords and states:</p>

  <table><thead><tr><th>Keyword
     <th>State
     <th>Brief description
   <tbody><tr><td><dfn data-dfn-for=html-global/dir id=attr-dir-ltr data-dfn-type=attr-value><code>ltr</code></dfn>
     <td><dfn id=attr-dir-ltr-state>LTR</dfn>
     <td>The contents of the element are explicitly directionally isolated left-to-right text.
    <tr><td><dfn data-dfn-for=html-global/dir id=attr-dir-rtl data-dfn-type=attr-value><code>rtl</code></dfn>
     <td><dfn id=attr-dir-rtl-state>RTL</dfn>
     <td>The contents of the element are explicitly directionally isolated right-to-left text.
    <tr><td><dfn data-dfn-for=html-global/dir id=attr-dir-auto data-dfn-type=attr-value><code>auto</code></dfn>
     <td><dfn id=attr-dir-auto-state>Auto</dfn>
     <td>The contents of the element are explicitly directionally isolated text, but the direction
     is to be determined programmatically using the contents of the element (as described
     below).
  </table>

  <div class=note>
   <p>The heuristic used by the <a href=#attr-dir-auto-state id=the-dir-attribute:attr-dir-auto-state>Auto</a> state is very crude
   (it just looks at the first character with a strong directionality, in a manner analogous to the
   Paragraph Level determination in the bidirectional algorithm). Authors are urged to only use this
   value as a last resort when the direction of the text is truly unknown and no better server-side
   heuristic can be applied. <a href=references.html#refsBIDI>[BIDI]</a></p>

   <p>For <code id=the-dir-attribute:the-textarea-element><a href=form-elements.html#the-textarea-element>textarea</a></code> and <code id=the-dir-attribute:the-pre-element><a href=grouping-content.html#the-pre-element>pre</a></code> elements, the heuristic is applied on a
   per-paragraph level.</p>
  </div>

  <p>The attribute's <i id=the-dir-attribute:missing-value-default><a href=common-microsyntaxes.html#missing-value-default>missing value default</a></i> and <i id=the-dir-attribute:invalid-value-default><a href=common-microsyntaxes.html#invalid-value-default>invalid value default</a></i> are both the <dfn id=attr-dir-undefined-state>Undefined</dfn> state.</p>

  <hr>

  <p>The <dfn id=the-directionality>directionality</dfn> of an element (any element, not just
  an <a href=infrastructure.html#html-elements id=the-dir-attribute:html-elements>HTML element</a>) is either '<dfn id=concept-ltr>ltr</dfn>' or '<dfn id=concept-rtl>rtl</dfn>'. To compute the <a href=#the-directionality id=the-dir-attribute:the-directionality>directionality</a> given an element <var>element</var>, switch on
  <var>element</var>'s <code id=the-dir-attribute:attr-dir-2><a href=#attr-dir>dir</a></code> attribute state:</p>

  <dl class=switch><dt><a href=#attr-dir-ltr-state id=the-dir-attribute:attr-dir-ltr-state>LTR</a><dd><p>Return '<a href=#concept-ltr id=the-dir-attribute:concept-ltr>ltr</a>'.<dt><a href=#attr-dir-rtl-state id=the-dir-attribute:attr-dir-rtl-state>RTL</a><dd><p>Return '<a href=#concept-rtl id=the-dir-attribute:concept-rtl>rtl</a>'.<dt><a href=#attr-dir-auto-state id=the-dir-attribute:attr-dir-auto-state-2>Auto</a><dd>
    <ol><li><p>Let <var>result</var> be the <a href=#auto-directionality id=the-dir-attribute:auto-directionality>auto directionality</a> of
     <var>element</var>.<li><p>If <var>result</var> is null, then return '<a href=#concept-ltr id=the-dir-attribute:concept-ltr-2>ltr</a>'.<li><p>Return <var>result</var>.</ol>
   <dt><a href=#attr-dir-undefined-state id=the-dir-attribute:attr-dir-undefined-state>Undefined</a><dd>
    <dl class=switch><dt>If <var>element</var> is a <code id=the-dir-attribute:the-bdi-element><a href=text-level-semantics.html#the-bdi-element>bdi</a></code> element<dd>
      <ol><li><p>Let <var>result</var> be the <a href=#auto-directionality id=the-dir-attribute:auto-directionality-2>auto directionality</a> of
       <var>element</var>.<li><p>If <var>result</var> is null, then return '<a href=#concept-ltr id=the-dir-attribute:concept-ltr-3>ltr</a>'.<li><p>Return <var>result</var>.</ol>
     <dt>If <var>element</var> is an <code id=the-dir-attribute:the-input-element><a href=input.html#the-input-element>input</a></code> element whose <code id=the-dir-attribute:attr-input-type><a href=input.html#attr-input-type>type</a></code> attribute is in the <a href="input.html#telephone-state-(type=tel)" id="the-dir-attribute:telephone-state-(type=tel)">Telephone</a> state<dd><p>Return '<a href=#concept-ltr id=the-dir-attribute:concept-ltr-4>ltr</a>'.<dt>Otherwise<dd><p>Return the <a href=#parent-directionality id=the-dir-attribute:parent-directionality>parent directionality</a> of <var>element</var>.</dl>
   </dl>

  <p class=note>Since the <code id=the-dir-attribute:attr-dir-3><a href=#attr-dir>dir</a></code> attribute is only defined for
  <a id=the-dir-attribute:html-elements-2 href=infrastructure.html#html-elements>HTML elements</a>, it cannot be present on elements from other namespaces. Thus, elements
  from other namespaces always end up using the <a href=#parent-directionality id=the-dir-attribute:parent-directionality-2>parent directionality</a>.</p>

  <p>The <dfn id=auto-directionality-form-associated-elements>auto-directionality form-associated elements</dfn> are:

  <ul><li><p><code id=the-dir-attribute:the-input-element-2><a href=input.html#the-input-element>input</a></code> elements whose <code id=the-dir-attribute:attr-input-type-2><a href=input.html#attr-input-type>type</a></code> attribute is
   in the <a href="input.html#hidden-state-(type=hidden)" id="the-dir-attribute:hidden-state-(type=hidden)">Hidden</a>, <a href="input.html#text-(type=text)-state-and-search-state-(type=search)" id="the-dir-attribute:text-(type=text)-state-and-search-state-(type=search)">Text</a>, <a href="input.html#text-(type=text)-state-and-search-state-(type=search)" id="the-dir-attribute:text-(type=text)-state-and-search-state-(type=search)-2">Search</a>,
   <a href="input.html#telephone-state-(type=tel)" id="the-dir-attribute:telephone-state-(type=tel)-2">Telephone</a>, <a href="input.html#url-state-(type=url)" id="the-dir-attribute:url-state-(type=url)">URL</a>, <a href="input.html#email-state-(type=email)" id="the-dir-attribute:email-state-(type=email)">Email</a>, <a href="input.html#password-state-(type=password)" id="the-dir-attribute:password-state-(type=password)">Password</a>, <a href="input.html#submit-button-state-(type=submit)" id="the-dir-attribute:submit-button-state-(type=submit)">Submit
   Button</a>, <a href="input.html#reset-button-state-(type=reset)" id="the-dir-attribute:reset-button-state-(type=reset)">Reset Button</a>, or <a href="input.html#button-state-(type=button)" id="the-dir-attribute:button-state-(type=button)">Button</a> state, and<li><p><code id=the-dir-attribute:the-textarea-element-2><a href=form-elements.html#the-textarea-element>textarea</a></code> elements.</ul>

  <p>To compute the <dfn id=auto-directionality>auto directionality</dfn> given an element <var>element</var>:</p>

  <ol><li>
    <p>If <var>element</var> is an <a href=#auto-directionality-form-associated-elements id=the-dir-attribute:auto-directionality-form-associated-elements>auto-directionality form-associated element</a>:

    <ol><li><p>If <var>element</var>'s <a href=form-control-infrastructure.html#concept-fe-value id=the-dir-attribute:concept-fe-value>value</a> contains a
     character of bidirectional character type AL or R, and there is no character of bidirectional
     character type L anywhere before it in the element's <a href=form-control-infrastructure.html#concept-fe-value id=the-dir-attribute:concept-fe-value-2>value</a>, then return '<a href=#concept-rtl id=the-dir-attribute:concept-rtl-2>rtl</a>'.
     <a href=references.html#refsBIDI>[BIDI]</a><li><p>If <var>element</var>'s <a href=form-control-infrastructure.html#concept-fe-value id=the-dir-attribute:concept-fe-value-3>value</a> is not the empty
     string, then return '<a href=#concept-ltr id=the-dir-attribute:concept-ltr-5>ltr</a>'.<li><p>Return null.</ol>
   <li>
    <p>If <var>element</var> is a <code id=the-dir-attribute:the-slot-element><a href=scripting.html#the-slot-element>slot</a></code> element whose <a id=the-dir-attribute:root href=https://dom.spec.whatwg.org/#concept-tree-root data-x-internal=root>root</a> is a
    <a id=the-dir-attribute:shadow-root href=https://dom.spec.whatwg.org/#concept-shadow-root data-x-internal=shadow-root>shadow root</a> and <var>element</var>'s <a id=the-dir-attribute:assigned-nodes href=https://dom.spec.whatwg.org/#slot-assigned-nodes data-x-internal=assigned-nodes>assigned nodes</a> are not empty:</p>

    <ol><li>
      <p><a href=https://infra.spec.whatwg.org/#list-iterate id=the-dir-attribute:list-iterate data-x-internal=list-iterate>For each</a> node <var>child</var> of <var>element</var>'s
      <a id=the-dir-attribute:assigned-nodes-2 href=https://dom.spec.whatwg.org/#slot-assigned-nodes data-x-internal=assigned-nodes>assigned nodes</a>:</p>

      <ol><li><p>Let <var>childDirection</var> be null.<li><p>If <var>child</var> is a <code id=the-dir-attribute:text><a data-x-internal=text href=https://dom.spec.whatwg.org/#interface-text>Text</a></code> node, then set <var>childDirection</var> to
       the <a href=#text-node-directionality id=the-dir-attribute:text-node-directionality>text node directionality</a> of <var>child</var>.<li>
        <p>Otherwise:</p>

        <ol><li><p><a id=the-dir-attribute:assert href=https://infra.spec.whatwg.org/#assert data-x-internal=assert>Assert</a>: <var>child</var> is an <code id=the-dir-attribute:element><a data-x-internal=element href=https://dom.spec.whatwg.org/#interface-element>Element</a></code> node.<li><p>Set <var>childDirection</var> to the <a href=#contained-text-auto-directionality id=the-dir-attribute:contained-text-auto-directionality>contained text auto directionality</a>
         of <var>child</var> with <i><a href=#auto-directionality-can-exclude-root id=the-dir-attribute:auto-directionality-can-exclude-root>canExcludeRoot</a></i> set to
         true.</ol>
       <li><p>If <var>childDirection</var> is not null, then return
       <var>childDirection</var>.</ol>
     <li><p>Return null.</ol>
   <li><p>Return the <a href=#contained-text-auto-directionality id=the-dir-attribute:contained-text-auto-directionality-2>contained text auto directionality</a> of <var>element</var> with
   <i><a href=#auto-directionality-can-exclude-root id=the-dir-attribute:auto-directionality-can-exclude-root-2>canExcludeRoot</a></i> set to
   false.</ol>

  <p>To compute the <dfn id=contained-text-auto-directionality>contained text auto directionality</dfn> of an element
  <var>element</var> with a boolean <dfn id=auto-directionality-can-exclude-root><var>canExcludeRoot</var></dfn>:</p>

  <ol><li>
    <p><a href=https://infra.spec.whatwg.org/#list-iterate id=the-dir-attribute:list-iterate-2 data-x-internal=list-iterate>For each</a> node <var>descendant</var> of
    <var>element</var>'s <a href=https://dom.spec.whatwg.org/#concept-tree-descendant id=the-dir-attribute:descendant data-x-internal=descendant>descendants</a>, in <a id=the-dir-attribute:tree-order href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree
    order</a>:</p>

    <ol><li>
      <p>If any of</p>

      <ul class=brief><li><var>descendant</var><li>any ancestor element of <var>descendant</var> that is a descendant of <var>element</var><li>if <var>canExcludeRoot</var> is true, <var>element</var></ul>

      <p>is one of</p>

      <ul class=brief><li>a <code id=the-dir-attribute:the-bdi-element-2><a href=text-level-semantics.html#the-bdi-element>bdi</a></code> element<li>a <code id=the-dir-attribute:the-script-element><a href=scripting.html#the-script-element>script</a></code> element<li>a <code id=the-dir-attribute:the-style-element><a href=semantics.html#the-style-element>style</a></code> element<li>a <code id=the-dir-attribute:the-textarea-element-3><a href=form-elements.html#the-textarea-element>textarea</a></code> element<li>an element whose <code id=the-dir-attribute:attr-dir-4><a href=#attr-dir>dir</a></code> attribute is not in the <a href=#attr-dir-undefined-state id=the-dir-attribute:attr-dir-undefined-state-2>Undefined</a> state</ul>

      <p>then <a id=the-dir-attribute:continue href=https://infra.spec.whatwg.org/#iteration-continue data-x-internal=continue>continue</a>.</p>
     <li><p>If <var>descendant</var> is a <code id=the-dir-attribute:the-slot-element-2><a href=scripting.html#the-slot-element>slot</a></code> element whose <a id=the-dir-attribute:root-2 href=https://dom.spec.whatwg.org/#concept-tree-root data-x-internal=root>root</a> is a
     <a id=the-dir-attribute:shadow-root-2 href=https://dom.spec.whatwg.org/#concept-shadow-root data-x-internal=shadow-root>shadow root</a>, then return the <a href=#the-directionality id=the-dir-attribute:the-directionality-2>directionality</a> of that <a id=the-dir-attribute:shadow-root-3 href=https://dom.spec.whatwg.org/#concept-shadow-root data-x-internal=shadow-root>shadow root</a>'s <a href=https://dom.spec.whatwg.org/#concept-documentfragment-host id=the-dir-attribute:concept-documentfragment-host data-x-internal=concept-documentfragment-host>host</a>.<li><p>If <var>descendant</var> is not a <code id=the-dir-attribute:text-2><a data-x-internal=text href=https://dom.spec.whatwg.org/#interface-text>Text</a></code> node, then
     <a id=the-dir-attribute:continue-2 href=https://infra.spec.whatwg.org/#iteration-continue data-x-internal=continue>continue</a>.<li><p>Let <var>result</var> be the <a href=#text-node-directionality id=the-dir-attribute:text-node-directionality-2>text node directionality</a> of
     <var>descendant</var>.<li><p>If <var>result</var> is not null, then return <var>result</var>.</ol>
   <li><p>Return null.</ol>

  <p>To compute the <dfn id=text-node-directionality>text node directionality</dfn> given a <code id=the-dir-attribute:text-3><a data-x-internal=text href=https://dom.spec.whatwg.org/#interface-text>Text</a></code> node
  <var>text</var>:</p>

  <ol><li><p>If <var>text</var>'s <a href=https://dom.spec.whatwg.org/#concept-cd-data id=the-dir-attribute:concept-cd-data data-x-internal=concept-cd-data>data</a> does not contain a code
   point whose bidirectional character type is L, AL, or R, then return null.
   <a href=references.html#refsBIDI>[BIDI]</a><li><p>Let <var>codePoint</var> be the first code point in <var>text</var>'s <a href=https://dom.spec.whatwg.org/#concept-cd-data id=the-dir-attribute:concept-cd-data-2 data-x-internal=concept-cd-data>data</a> whose bidirectional character type is L, AL, or R.<li><p>If <var>codePoint</var> is of bidirectional character type AL or R, then return '<a href=#concept-rtl id=the-dir-attribute:concept-rtl-3>rtl</a>'.<li><p>If <var>codePoint</var> is of bidirectional character type L, then return '<a href=#concept-ltr id=the-dir-attribute:concept-ltr-6>ltr</a>'.</ol>

  <p>To compute the <dfn id=parent-directionality>parent directionality</dfn> given an element <var>element</var>:</p>

  <ol><li><p>Let <var>parentNode</var> be <var>element</var>'s parent node.<li><p>If <var>parentNode</var> is a <a id=the-dir-attribute:shadow-root-4 href=https://dom.spec.whatwg.org/#concept-shadow-root data-x-internal=shadow-root>shadow root</a>, then return the <a href=#the-directionality id=the-dir-attribute:the-directionality-3>directionality</a> of <var>parentNode</var>'s <a href=https://dom.spec.whatwg.org/#concept-documentfragment-host id=the-dir-attribute:concept-documentfragment-host-2 data-x-internal=concept-documentfragment-host>host</a>.<li><p>If <var>parentNode</var> is an element, then return the <a href=#the-directionality id=the-dir-attribute:the-directionality-4>directionality</a> of <var>parentNode</var>.<li><p>Return '<a href=#concept-ltr id=the-dir-attribute:concept-ltr-7>ltr</a>'.</ol>

  

  <hr>

  <p>The <dfn id=directionality-of-the-attribute>directionality of an attribute</dfn> of an
  <a href=infrastructure.html#html-elements id=the-dir-attribute:html-elements-3>HTML element</a>, which is used when the text of that attribute is
  to be included in the rendering in some manner, is determined as per the first appropriate set of
  steps from the following list:</p>

  <dl class=switch><dt>If the attribute is a <a href=#directionality-capable-attribute id=the-dir-attribute:directionality-capable-attribute>directionality-capable attribute</a> and the element's <code id=the-dir-attribute:attr-dir-5><a href=#attr-dir>dir</a></code> attribute is in the <a href=#attr-dir-auto-state id=the-dir-attribute:attr-dir-auto-state-3>Auto</a>
   state<dd>
    <p>Find the first character (in logical order) of the attribute's value that is of bidirectional
    character type L, AL, or R. <a href=references.html#refsBIDI>[BIDI]</a></p>

    <p>If such a character is found and it is of bidirectional character type AL or R, the
    <a href=#directionality-of-the-attribute id=the-dir-attribute:directionality-of-the-attribute>directionality of the attribute</a> is '<a href=#concept-rtl id=the-dir-attribute:concept-rtl-4>rtl</a>'.</p>

    <p>Otherwise, the <a href=#directionality-of-the-attribute id=the-dir-attribute:directionality-of-the-attribute-2>directionality of the attribute</a> is '<a href=#concept-ltr id=the-dir-attribute:concept-ltr-8>ltr</a>'.</p>
   <dt>Otherwise<dd>The <a href=#directionality-of-the-attribute id=the-dir-attribute:directionality-of-the-attribute-3>directionality of the attribute</a> is the same as <a href=#the-directionality id=the-dir-attribute:the-directionality-5>the element's directionality</a>.</dl>

  <p>The following attributes are <dfn id=directionality-capable-attribute>directionality-capable attributes</dfn>:</p>

  <ul class=brief><li><code id=the-dir-attribute:attr-th-abbr><a href=tables.html#attr-th-abbr>abbr</a></code> on <code id=the-dir-attribute:the-th-element><a href=tables.html#the-th-element>th</a></code> elements<li><code>alt</code> on <code id=the-dir-attribute:attr-area-alt><a href=image-maps.html#attr-area-alt>area</a></code>,
                                    <code id=the-dir-attribute:attr-img-alt><a href=embedded-content.html#attr-img-alt>img</a></code>, and
                                    <code id=the-dir-attribute:attr-input-alt><a href=input.html#attr-input-alt>input</a></code> elements<li><code id=the-dir-attribute:attr-meta-content><a href=semantics.html#attr-meta-content>content</a></code> on <code id=the-dir-attribute:the-meta-element><a href=semantics.html#the-meta-element>meta</a></code> elements, if the <code id=the-dir-attribute:attr-meta-name><a href=semantics.html#attr-meta-name>name</a></code> attribute specifies a metadata name whose value is primarily intended to be human-readable rather than machine-readable<li><code>label</code> on <code id=the-dir-attribute:attr-optgroup-label><a href=form-elements.html#attr-optgroup-label>optgroup</a></code>,
                                       <code id=the-dir-attribute:attr-option-label><a href=form-elements.html#attr-option-label>option</a></code>, and
                                       <code id=the-dir-attribute:attr-track-label><a href=media.html#attr-track-label>track</a></code> elements<li><code>placeholder</code> on <code id=the-dir-attribute:attr-input-placeholder><a href=input.html#attr-input-placeholder>input</a></code> and
                                            <code id=the-dir-attribute:attr-textarea-placeholder><a href=form-elements.html#attr-textarea-placeholder>textarea</a></code> elements<li><code id=the-dir-attribute:attr-title><a href=#attr-title>title</a></code> on all <a id=the-dir-attribute:html-elements-4 href=infrastructure.html#html-elements>HTML elements</a></ul>

  <hr>

  <dl class=domintro><dt><code><var>document</var>.<span id=dom-dir>dir</span> [ = <var>value</var> ]</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dir title="The HTMLElement.dir property gets or sets the text writing directionality of the content of the current element.">HTMLElement/dir</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>1+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd>
    <p>Returns <a href=#the-html-element-2 id=the-dir-attribute:the-html-element-2>the <code>html</code> element</a>'s <code id=the-dir-attribute:attr-dir-6><a href=#attr-dir>dir</a></code>
    attribute's value, if any.</p>

    <p>Can be set, to either "<code>ltr</code>", "<code>rtl</code>", or "<code>auto</code>" to replace <a href=#the-html-element-2 id=the-dir-attribute:the-html-element-2-2>the <code>html</code> element</a>'s <code id=the-dir-attribute:attr-dir-7><a href=#attr-dir>dir</a></code> attribute's value.</p>

    <p>If there is no <a href=#the-html-element-2 id=the-dir-attribute:the-html-element-2-3><code>html</code> element</a>, returns the
    empty string and ignores new values.</p>
   </dl>

  

  <p class=note>Authors are strongly encouraged to use the <code id=the-dir-attribute:attr-dir-8><a href=#attr-dir>dir</a></code>
  attribute to indicate text direction rather than using CSS, since that way their documents will
  continue to render correctly even in the absence of CSS (e.g. as interpreted by search
  engines).</p>

  <div class=example>

   <p>This markup fragment is of an IM conversation.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-> <c- e>dir</c-><c- o>=</c-><c- s>auto</c-> <c- e>class</c-><c- o>=</c-><c- s>&quot;u1&quot;</c-><c- p>&gt;&lt;</c-><c- f>b</c-><c- p>&gt;&lt;</c-><c- f>bdi</c-><c- p>&gt;</c->Student<c- p>&lt;/</c-><c- f>bdi</c-><c- p>&gt;</c->:<c- p>&lt;/</c-><c- f>b</c-><c- p>&gt;</c-> How do you write &quot;What&apos;s your name?&quot; in Arabic?<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>p</c-> <c- e>dir</c-><c- o>=</c-><c- s>auto</c-> <c- e>class</c-><c- o>=</c-><c- s>&quot;u2&quot;</c-><c- p>&gt;&lt;</c-><c- f>b</c-><c- p>&gt;&lt;</c-><c- f>bdi</c-><c- p>&gt;</c->Teacher<c- p>&lt;/</c-><c- f>bdi</c-><c- p>&gt;</c->:<c- p>&lt;/</c-><c- f>b</c-><c- p>&gt;</c-> ما اسمك؟<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>p</c-> <c- e>dir</c-><c- o>=</c-><c- s>auto</c-> <c- e>class</c-><c- o>=</c-><c- s>&quot;u1&quot;</c-><c- p>&gt;&lt;</c-><c- f>b</c-><c- p>&gt;&lt;</c-><c- f>bdi</c-><c- p>&gt;</c->Student<c- p>&lt;/</c-><c- f>bdi</c-><c- p>&gt;</c->:<c- p>&lt;/</c-><c- f>b</c-><c- p>&gt;</c-> Thanks.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>p</c-> <c- e>dir</c-><c- o>=</c-><c- s>auto</c-> <c- e>class</c-><c- o>=</c-><c- s>&quot;u2&quot;</c-><c- p>&gt;&lt;</c-><c- f>b</c-><c- p>&gt;&lt;</c-><c- f>bdi</c-><c- p>&gt;</c->Teacher<c- p>&lt;/</c-><c- f>bdi</c-><c- p>&gt;</c->:<c- p>&lt;/</c-><c- f>b</c-><c- p>&gt;</c-> That&apos;s written &quot;شكرًا&quot;.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>p</c-> <c- e>dir</c-><c- o>=</c-><c- s>auto</c-> <c- e>class</c-><c- o>=</c-><c- s>&quot;u2&quot;</c-><c- p>&gt;&lt;</c-><c- f>b</c-><c- p>&gt;&lt;</c-><c- f>bdi</c-><c- p>&gt;</c->Teacher<c- p>&lt;/</c-><c- f>bdi</c-><c- p>&gt;</c->:<c- p>&lt;/</c-><c- f>b</c-><c- p>&gt;</c-> Do you know how to write &quot;Please&quot;?<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>p</c-> <c- e>dir</c-><c- o>=</c-><c- s>auto</c-> <c- e>class</c-><c- o>=</c-><c- s>&quot;u1&quot;</c-><c- p>&gt;&lt;</c-><c- f>b</c-><c- p>&gt;&lt;</c-><c- f>bdi</c-><c- p>&gt;</c->Student<c- p>&lt;/</c-><c- f>bdi</c-><c- p>&gt;</c->:<c- p>&lt;/</c-><c- f>b</c-><c- p>&gt;</c-> &quot;من فضلك&quot;, right?<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>



   <p>Given a suitable style sheet and the default alignment styles for the <code id=the-dir-attribute:the-p-element><a href=grouping-content.html#the-p-element>p</a></code> element,
   namely to align the text to the <i>start edge</i> of the paragraph, the resulting rendering could
   be as follows:</p>

   <p><img alt="Each paragraph rendered as a separate block, with the paragraphs left-aligned except the second paragraph and the last one, which would be right aligned, with the usernames ('Student' and 'Teacher' in this example) flush right, with a colon to their left, and the text first to the left of that." src=../images/im.png width=366 height=157></p>

   <p>As noted earlier, the <code id=the-dir-attribute:attr-dir-auto><a href=#attr-dir-auto>auto</a></code> value is not a panacea. The
   final paragraph in this example is misinterpreted as being right-to-left text, since it begins
   with an Arabic character, which causes the "right?" to be to the left of the Arabic text.</p>

  </div>



  <h5 id=the-style-attribute><span class=secno>3.2.5.5</span> The <code id=the-style-attribute:attr-style><a href=#attr-style>style</a></code> attribute<a href=#the-style-attribute class=self-link></a></h5><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/style title="The style global attribute contains CSS styling declarations to be applied to the element. Note that it is recommended for styles to be defined in a separate file or files. This attribute and the <style> element have mainly the purpose of allowing for quick styling, for example for testing purposes.">Global_attributes/style</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <p>All <a id=the-style-attribute:html-elements href=infrastructure.html#html-elements>HTML elements</a> may have the <dfn data-dfn-for=html-global id=attr-style data-dfn-type=element-attr><code>style</code></dfn> content attribute set. This is a <a href=https://drafts.csswg.org/css-style-attr/#style-attribute id=the-style-attribute:css-styling-attribute data-x-internal=css-styling-attribute>style attribute</a> as defined by <cite>CSS Style
  Attributes</cite>. <a href=references.html#refsCSSATTR>[CSSATTR]</a></p>

  

  <p>Documents that use <code id=the-style-attribute:attr-style-2><a href=#attr-style>style</a></code> attributes on any of their elements
  must still be comprehensible and usable if those attributes were removed.</p>

  <p class=note>In particular, using the <code id=the-style-attribute:attr-style-3><a href=#attr-style>style</a></code> attribute to hide
  and show content, or to convey meaning that is otherwise not included in the document, is
  non-conforming. (To hide and show content, use the <code id=the-style-attribute:attr-hidden><a href=interaction.html#attr-hidden>hidden</a></code>
  attribute.)</p>

  <hr>

  <dl class=domintro><dt><code><var>element</var>.<a href=https://drafts.csswg.org/cssom/#dom-elementcssinlinestyle-style id=dom-style-2 data-x-internal=dom-style>style</a></code><dd><p>Returns a <code id=the-style-attribute:cssstyledeclaration><a data-x-internal=cssstyledeclaration href=https://drafts.csswg.org/cssom/#the-cssstyledeclaration-interface>CSSStyleDeclaration</a></code> object for the element's <code id=the-style-attribute:attr-style-4><a href=#attr-style>style</a></code> attribute.</dl>

  

  <div class=example>

   <p>In the following example, the words that refer to colors are marked up using the
   <code id=the-style-attribute:the-span-element><a href=text-level-semantics.html#the-span-element>span</a></code> element and the <code id=the-style-attribute:attr-style-5><a href=#attr-style>style</a></code> attribute to make those
   words show up in the relevant colors in visual media.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->My sweat suit is <c- p>&lt;</c-><c- f>span</c-> <c- e>style</c-><c- o>=</c-><c- s>&quot;color: green; background:</c->
<c- s>transparent&quot;</c-><c- p>&gt;</c->green<c- p>&lt;/</c-><c- f>span</c-><c- p>&gt;</c-> and my eyes are <c- p>&lt;</c-><c- f>span</c-> <c- e>style</c-><c- o>=</c-><c- s>&quot;color: blue;</c->
<c- s>background: transparent&quot;</c-><c- p>&gt;</c->blue<c- p>&lt;/</c-><c- f>span</c-><c- p>&gt;</c->.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

  </div>



  <h5 id=embedding-custom-non-visible-data-with-the-data-*-attributes><span class=secno>3.2.5.6</span> <dfn>Embedding custom non-visible data</dfn> with the <code id=embedding-custom-non-visible-data-with-the-data-*-attributes:attr-data-*><a href=#attr-data-*>data-*</a></code> attributes<a href=#embedding-custom-non-visible-data-with-the-data-*-attributes class=self-link></a></h5>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-* title="The data-* global attributes form a class of attributes called custom data attributes, that allow proprietary information to be exchanged between the HTML and its DOM representation by scripts.">Global_attributes/data-*</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>6+</span></span><span class="safari yes"><span>Safari</span><span>5.1+</span></span><span class="chrome yes"><span>Chrome</span><span>7+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><p>A <dfn id=custom-data-attribute>custom data attribute</dfn> is an attribute in no namespace whose name starts with the
  string "<dfn id=attr-data-*><code>data-</code></dfn>", has at least one character after the
  hyphen, is a <a id=embedding-custom-non-visible-data-with-the-data-*-attributes:valid-attribute-local-name href=https://dom.spec.whatwg.org/#valid-attribute-local-name data-x-internal=valid-attribute-local-name>valid attribute local name</a>, and contains no <a href=https://infra.spec.whatwg.org/#ascii-upper-alpha id=embedding-custom-non-visible-data-with-the-data-*-attributes:uppercase-ascii-letters data-x-internal=uppercase-ascii-letters>ASCII upper alphas</a>.</p>

  <p class=note>All attribute names on <a id=embedding-custom-non-visible-data-with-the-data-*-attributes:html-elements href=infrastructure.html#html-elements>HTML elements</a> in <a id=embedding-custom-non-visible-data-with-the-data-*-attributes:html-documents href=https://dom.spec.whatwg.org/#html-document data-x-internal=html-documents>HTML documents</a>
  get ASCII-lowercased automatically, so the restriction on ASCII uppercase letters doesn't affect
  such documents.</p>

  <p><a href=#custom-data-attribute id=embedding-custom-non-visible-data-with-the-data-*-attributes:custom-data-attribute>Custom data attributes</a> are intended to store custom
  data, state, annotations, and similar, private to the page or application, for which there are no
  more appropriate attributes or elements.</p>

  <p>These attributes are not intended for use by software that is not known to the administrators
  of the site that uses the attributes. For generic extensions that are to be used by multiple
  independent tools, either this specification should be extended to provide the feature explicitly,
  or a technology like <a id=embedding-custom-non-visible-data-with-the-data-*-attributes:microdata href=microdata.html#microdata>microdata</a> should be used (with a standardized vocabulary).</p>

  <div class=example>

   <p>For instance, a site about music could annotate list items representing tracks in an album
   with custom data attributes containing the length of each track. This information could then be
   used by the site itself to allow the user to sort the list by track length, or to filter the list
   for tracks of certain lengths.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>ol</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>li</c-> <c- e>data-length</c-><c- o>=</c-><c- s>&quot;2m11s&quot;</c-><c- p>&gt;</c->Beyond The Sea<c- p>&lt;/</c-><c- f>li</c-><c- p>&gt;</c->
 ...
<c- p>&lt;/</c-><c- f>ol</c-><c- p>&gt;</c-></code></pre>

   <p>It would be inappropriate, however, for the user to use generic software not associated with
   that music site to search for tracks of a certain length by looking at this data.</p>

   <p>This is because these attributes are intended for use by the site's own scripts, and are not a
   generic extension mechanism for publicly-usable metadata.</p>

  </div>

  <div class=example>

   <p>Similarly, a page author could write markup that provides information for a translation tool
   that they are intending to use:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->The third <c- p>&lt;</c-><c- f>span</c-> <c- e>data-mytrans-de</c-><c- o>=</c-><c- s>&quot;Anspruch&quot;</c-><c- p>&gt;</c->claim<c- p>&lt;/</c-><c- f>span</c-><c- p>&gt;</c-> covers the case of <c- p>&lt;</c-><c- f>span</c->
<c- e>translate</c-><c- o>=</c-><c- s>&quot;no&quot;</c-><c- p>&gt;</c->HTML<c- p>&lt;/</c-><c- f>span</c-><c- p>&gt;</c-> markup.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

   <p>In this example, the "<code>data-mytrans-de</code>" attribute gives specific text
   for the MyTrans product to use when translating the phrase "claim" to German. However, the
   standard <code id=embedding-custom-non-visible-data-with-the-data-*-attributes:attr-translate><a href=#attr-translate>translate</a></code> attribute is used to tell it that in all
   languages, "HTML" is to remain unchanged. When a standard attribute is available, there is no
   need for a <a href=#custom-data-attribute id=embedding-custom-non-visible-data-with-the-data-*-attributes:custom-data-attribute-2>custom data attribute</a> to be used.</p>

  </div>

  <div class=example>

   <p>In this example, custom data attributes are used to store the result of a feature detection
   for <code id=embedding-custom-non-visible-data-with-the-data-*-attributes:paymentrequest><a data-x-internal=paymentrequest href=https://w3c.github.io/payment-request/#dom-paymentrequest>PaymentRequest</a></code>, which could be used in CSS to style a checkout page
   differently.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>script</c-><c- p>&gt;</c->
 <c- k>if</c-> <c- p>(</c-><c- t>&apos;PaymentRequest&apos;</c-> <c- k>in</c-> window<c- p>)</c-> <c- p>{</c->
   document<c- p>.</c->documentElement<c- p>.</c->dataset<c- p>.</c->hasPaymentRequest <c- o>=</c-> <c- t>&apos;&apos;</c-><c- p>;</c->
 <c- p>}</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c-></code></pre>

   <p>Here, the <code>data-has-payment-request</code> attribute is effectively being used
   as a <a id=embedding-custom-non-visible-data-with-the-data-*-attributes:boolean-attribute href=common-microsyntaxes.html#boolean-attribute>boolean attribute</a>; it is enough to check the presence of the attribute.
   However, if the author so wishes, it could later be populated with some value, maybe to indicate
   limited functionality of the feature.</p>

  </div>

  <p>Every <a href=infrastructure.html#html-elements id=embedding-custom-non-visible-data-with-the-data-*-attributes:html-elements-2>HTML element</a> may have any number of <a href=#custom-data-attribute id=embedding-custom-non-visible-data-with-the-data-*-attributes:custom-data-attribute-3>custom data attributes</a> specified, with any value.</p>

  <p>Authors should carefully design such extensions so that when the attributes are ignored and any
  associated CSS dropped, the page is still usable.</p>

  

  <p>JavaScript libraries may use the <a href=#custom-data-attribute id=embedding-custom-non-visible-data-with-the-data-*-attributes:custom-data-attribute-4>custom data
  attributes</a>, as they are considered to be part of the page on which they are used. Authors
  of libraries that are reused by many authors are encouraged to include their name in the attribute
  names, to reduce the risk of clashes. Where it makes sense, library authors are also encouraged to
  make the exact name used in the attribute names customizable, so that libraries whose authors
  unknowingly picked the same name can be used on the same page, and so that multiple versions of a
  particular library can be used on the same page even when those versions are not mutually
  compatible.</p>

  <div class=example>

   <p>For example, a library called "DoQuery" could use attribute names like <code>data-doquery-range</code>, and a library called "jJo" could use attributes names like
   <code>data-jjo-range</code>. The jJo library could also provide an API to set which
   prefix to use (e.g. <code>J.setDataPrefix('j2')</code>, making the attributes have names
   like <code>data-j2-range</code>).</p>

  </div>

  <hr>

  <dl class=domintro><dt><code><var>element</var>.<span id=dom-dataset>dataset</span></code><dd>
    <p>Returns a <code>DOMStringMap</code> object for the element's <code id=embedding-custom-non-visible-data-with-the-data-*-attributes:attr-data-*-2><a href=#attr-data-*>data-*</a></code> attributes.</p>

    <p>Hyphenated names become camel-cased. For example, <code>data-foo-bar=""</code>
    becomes <code>element.dataset.fooBar</code>.</p>
   </dl>

  

  <p>The <code>DOMStringMap</code> interface is used for the <code id=embedding-custom-non-visible-data-with-the-data-*-attributes:dom-dataset><a href=#dom-dataset>dataset</a></code> attribute. Each <code>DOMStringMap</code> has an <dfn id=concept-domstringmap-element>associated element</dfn>.</p>

  

  

  <div class=example>

   <p>If a web page wanted an element to represent a space ship, e.g. as part of a game, it would
   have to use the <code id=embedding-custom-non-visible-data-with-the-data-*-attributes:classes><a href=#classes>class</a></code> attribute along with <code id=embedding-custom-non-visible-data-with-the-data-*-attributes:attr-data-*-3><a href=#attr-data-*>data-*</a></code> attributes:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>div</c-> <c- e>class</c-><c- o>=</c-><c- s>&quot;spaceship&quot;</c-> <c- e>data-ship-id</c-><c- o>=</c-><c- s>&quot;92432&quot;</c->
     <c- e>data-weapons</c-><c- o>=</c-><c- s>&quot;laser 2&quot;</c-> <c- e>data-shields</c-><c- o>=</c-><c- s>&quot;50%&quot;</c->
     <c- e>data-</c-><c- e>x</c-><c- o>=</c-><c- s>&quot;30&quot;</c-> <c- e>data-y</c-><c- o>=</c-><c- s>&quot;10&quot;</c-> <c- e>data-z</c-><c- o>=</c-><c- s>&quot;90&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>button</c-> <c- e>class</c-><c- o>=</c-><c- s>&quot;fire&quot;</c->
         <c- e>onclick</c-><c- o>=</c-><c- s>&quot;spaceships[this.parentNode.dataset.shipId].fire()&quot;</c-><c- p>&gt;</c->
  Fire
 <c- p>&lt;/</c-><c- f>button</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>div</c-><c- p>&gt;</c-></code></pre>

   <p>Notice how the hyphenated attribute name becomes camel-cased in the API.</p>

  </div>

  <div class=example>

   <p>Given the following fragment and elements with similar constructions:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>img</c-> <c- e>class</c-><c- o>=</c-><c- s>&quot;tower&quot;</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;tower5&quot;</c-> <c- e>data-</c-><c- e>x</c-><c- o>=</c-><c- s>&quot;12&quot;</c-> <c- e>data-y</c-><c- o>=</c-><c- s>&quot;5&quot;</c->
     <c- e>data-ai</c-><c- o>=</c-><c- s>&quot;robotarget&quot;</c-> <c- e>data-hp</c-><c- o>=</c-><c- s>&quot;46&quot;</c-> <c- e>data-ability</c-><c- o>=</c-><c- s>&quot;flames&quot;</c->
     <c- e>src</c-><c- o>=</c-><c- s>&quot;towers/rocket.png&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;Rocket Tower&quot;</c-><c- p>&gt;</c-></code></pre>

   <p>...one could imagine a function <code>splashDamage()</code> that takes some arguments, the first
   of which is the element to process:</p>

   <pre><code class='js'><c- a>function</c-> splashDamage<c- p>(</c->node<c- p>,</c-> x<c- p>,</c-> y<c- p>,</c-> damage<c- p>)</c-> <c- p>{</c->
  <c- k>if</c-> <c- p>(</c->node<c- p>.</c->classList<c- p>.</c->contains<c- p>(</c-><c- t>&apos;tower&apos;</c-><c- p>)</c-> <c- o>&amp;&amp;</c-> <c- c1>// checking the &apos;class&apos; attribute</c->
      node<c- p>.</c->dataset<c- p>.</c->x <c- o>==</c-> x <c- o>&amp;&amp;</c-> <c- c1>// reading the &apos;data-x&apos; attribute</c->
      node<c- p>.</c->dataset<c- p>.</c->y <c- o>==</c-> y<c- p>)</c-> <c- p>{</c-> <c- c1>// reading the &apos;data-y&apos; attribute</c->
    <c- a>var</c-> hp <c- o>=</c-> parseInt<c- p>(</c->node<c- p>.</c->dataset<c- p>.</c->hp<c- p>);</c-> <c- c1>// reading the &apos;data-hp&apos; attribute</c->
    hp <c- o>=</c-> hp <c- o>-</c-> damage<c- p>;</c->
    <c- k>if</c-> <c- p>(</c->hp <c- o>&lt;</c-> <c- mf>0</c-><c- p>)</c-> <c- p>{</c->
      hp <c- o>=</c-> <c- mf>0</c-><c- p>;</c->
      node<c- p>.</c->dataset<c- p>.</c->ai <c- o>=</c-> <c- t>&apos;dead&apos;</c-><c- p>;</c-> <c- c1>// setting the &apos;data-ai&apos; attribute</c->
      <c- k>delete</c-> node<c- p>.</c->dataset<c- p>.</c->ability<c- p>;</c-> <c- c1>// removing the &apos;data-ability&apos; attribute</c->
    <c- p>}</c->
    node<c- p>.</c->dataset<c- p>.</c->hp <c- o>=</c-> hp<c- p>;</c-> <c- c1>// setting the &apos;data-hp&apos; attribute</c->
  <c- p>}</c->
<c- p>}</c-></code></pre>

  </div>


  <h4 id=the-innertext-idl-attribute><span class=secno>3.2.6</span> The <code id=the-innertext-idl-attribute:dom-innertext><a href=#dom-innertext>innerText</a></code> and <code id=the-innertext-idl-attribute:dom-outertext><a href=#dom-outertext>outerText</a></code> properties<a href=#the-innertext-idl-attribute class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/innerText title="The innerText property of the HTMLElement interface represents the rendered text content of a node and its descendants.">HTMLElement/innerText</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>45+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>9.6+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>1+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>10.1+</span></span></div></div></div>

  <dl class=domintro><dt><code><var>element</var>.<span id=dom-innertext>innerText</span> [ = <var>value</var> ]</code><dd>
    <p>Returns the element's text content "as rendered".</p>

    <p>Can be set, to replace the element's children with the given value, but with line breaks
    converted to <code id=the-innertext-idl-attribute:the-br-element><a href=text-level-semantics.html#the-br-element>br</a></code> elements.</p>
   <dt><code><var>element</var>.<span id=dom-outertext>outerText</span> [ = <var>value</var> ]</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/outerText title="The outerText property of the HTMLElement interface returns the same value as HTMLElement.innerText. When used as a setter it replaces the whole current node with the given text (this differs from innerText, which replaces the content inside the current node).">HTMLElement/outerText</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>98+</span></span><span class="safari yes"><span>Safari</span><span>1.3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>1+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd>
    <p>Returns the element's text content "as rendered".</p>

    <p>Can be set, to replace the element with the given value, but with line breaks converted to
    <code id=the-innertext-idl-attribute:the-br-element-2><a href=text-level-semantics.html#the-br-element>br</a></code> elements.</p>
   </dl>

  

  <h4 id=requirements-relating-to-the-bidirectional-algorithm><span class=secno>3.2.7</span> Requirements relating to the bidirectional algorithm<a href=#requirements-relating-to-the-bidirectional-algorithm class=self-link></a></h4>

  

  <p><a href=#text-content id=requirements-relating-to-the-bidirectional-algorithm:text-content>Text content</a> in <a id=requirements-relating-to-the-bidirectional-algorithm:html-elements href=infrastructure.html#html-elements>HTML elements</a> with <code id=requirements-relating-to-the-bidirectional-algorithm:text><a data-x-internal=text href=https://dom.spec.whatwg.org/#interface-text>Text</a></code> nodes in their
  <a href=#concept-html-contents id=requirements-relating-to-the-bidirectional-algorithm:concept-html-contents>contents</a>, and text in attributes of <a id=requirements-relating-to-the-bidirectional-algorithm:html-elements-2 href=infrastructure.html#html-elements>HTML
  elements</a> that allow free-form text, may contain characters in the ranges U+202A to U+202E
  and U+2066 to U+2069 (the bidirectional-algorithm formatting characters). <a href=references.html#refsBIDI>[BIDI]</a></p>

  <p class=note>Authors are encouraged to use the <code id=requirements-relating-to-the-bidirectional-algorithm:attr-dir><a href=#attr-dir>dir</a></code> attribute, the
  <code id=requirements-relating-to-the-bidirectional-algorithm:the-bdo-element><a href=text-level-semantics.html#the-bdo-element>bdo</a></code> element, and the <code id=requirements-relating-to-the-bidirectional-algorithm:the-bdi-element><a href=text-level-semantics.html#the-bdi-element>bdi</a></code> element, rather than maintaining the
  bidirectional-algorithm formatting characters manually. The bidirectional-algorithm formatting
  characters interact poorly with CSS.</p>


  

  



  <nav><a href=structured-data.html>← 2.6 Safe passing of structured data</a> — <a href=./>Table of Contents</a> — <a href=semantics.html>4 The elements of HTML →</a></nav>
